SVG的foreignObject中的文本無法選擇

我有一個SVG並希望在其中顯示一些文本。由於SVG中有限的文本格式選項，我讀過可以推薦使用HTML代替文本。因此，在SVG裏面，每當我想要顯示文本時，我都有一個foreignObject，並且在那個文本內p。SVG的foreignObject中的文本無法選擇

所以結構：SVG -> foreignObject -> p

效果很好爲止！但是，我不能用鼠標選擇p中的文本。有什麼解決方法嗎？

編輯：看起來像一個簡單的例子，如下面的答案中所示，但由於某種原因，它不適用於這裏的結構。 This is the actual structure

來源

2015-06-25 pedjjj

工作完全正常，我在Firefox瀏覽器。如果你使用的是創建一個測試用例，那麼如果你沒有，那麼就會在非工作的UA上產生一個錯誤。 –

我也使用firefox，最新版本。 – pedjjj

foreignObject需要一個大寫字母O，並且還要求高度和寬度是屬性而不是css樣式（如我的答案中所述），如果這樣做不能解決問題，請提供像我一樣的可運行代碼，而不僅僅是截圖。 –

對我來說工作非常好。

<svg width="200px" height="80px"> 
 
    <foreignObject width="200px" height="80px"> 
 
    <html style="font-size:30px"> 
 
     <p>Select me</p> 
 
    </html> 
 
    </foreignObject> 
 
</svg>

來源

2015-06-25 13:38:31

是的，這很奇怪。這個簡單的例子在這裏運行良好。我用我的項目實際結構更新了我的問題 – pedjjj

SVG的foreignObject中的文本無法選擇

回答

相關問題