如何在svg rect中包裝文本

Question

我希望在rect中包含svg文本。我可以使用一種方法來比較寬度併爲文本添加換行符，但這並不乏味。

有沒有比這更優雅的方式？也許通過使用CSS或d3？

更新：下面的代碼使用d3附加foreignObject但不顯示div。 （它是存在於代碼inspecter）

var group = d3.select("#package"); 
 
var fo = group.append("foreignObject").attr("x", 15).attr("y", 15).attr("width", 190).attr("height", 90); 
 
fo.append("div").attr("xmlns", "http://www.w3.org/1999/xhtml").attr("style", "width:190px; height:90px; overflow-y:auto").text("Thiggfis the dgdexsgsggs wish to fit insidegssgsgs");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 

 
<p id="p"></p> 
 

 
<svg width="220" height="120" viewBox="0 0 220 120" id="package"> 
 
    <rect x="10" y="10" width="200" height="100" fill="none" stroke="black"/> 
 
</svg>

Answer 1

命名空間不能由attr分配，這是元素cre的副作用通貨膨脹。你需要一個html div，所以你需要告訴d3通過調用元素xhtml：div，一旦你這樣做，d3將完成剩下的工作。

var group = d3.select("#package"); 
 
var fo = group.append("foreignObject").attr("x", 15).attr("y", 15).attr("width", 190).attr("height", 90); 
 
fo.append("xhtml:div").attr("style", "width:190px; height:90px; overflow-y:auto").text("Thiggfis the dgdexsgsggs wish to fit insidegssgsgs");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 

 
<p id="p"></p> 
 

 
<svg width="220" height="120" viewBox="0 0 220 120" id="package"> 
 
    <rect x="10" y="10" width="200" height="100" fill="none" stroke="black"/> 
 
</svg>

Answer 2

這裏是用來插入HTML標記成SVG一個foreignObject的一個簡單的例子：

<svg width="220" height="120" viewBox="0 0 220 120"> 
 
    <rect x="10" y="10" width="200" height="100" fill="none" stroke="black" /> 
 
    <foreignObject x="15" y="15" width="190" height="90"> 
 
    <div xmlns="http://www.w3.org/1999/xhtml" style="width:190px; height:90px; overflow-y:auto"><b>This</b> is the <i>text</i> I wish to fit inside <code>rect</code></div> 
 
    </foreignObject> 
 
</svg>