I wish to fit svg text inside a rect. I could use an approach to pare the widths and add line breaks to the text, but it's not tedious.

Is there a more elegant way than this? Maybe by using CSS or d3?

UPDATE:the following code appends foreignObject using d3 but the div is not displayed. (it is there in the code 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", "").attr("style", "width:190px; height:90px; overflow-y:auto").text("Thiggfis the dgdexsgsggs wish to fit insidegssgsgs");

<script src=".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>

I wish to fit svg text inside a rect. I could use an approach to pare the widths and add line breaks to the text, but it's not tedious.

Is there a more elegant way than this? Maybe by using CSS or d3?

UPDATE:the following code appends foreignObject using d3 but the div is not displayed. (it is there in the code 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/1999/xhtml").attr("style", "width:190px; height:90px; overflow-y:auto").text("Thiggfis the dgdexsgsggs wish to fit insidegssgsgs");

<script src="https://cdnjs.cloudflare./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>

• javascript
• css
• d3.js
• svg

• 3 You could use a foreignObject to include html text which will wrap. – Robert Longson Commented Oct 11, 2016 at 9:37
• @RobertLongson can you tell me where the problem is in the above code? I tried to use d3 to append the foreignObject and div as the solution suggests. It is appended alright but not displayed. Why? – S.Dan Commented Oct 11, 2016 at 10:48

2 Answers 2

A namespace cannot be assigned by attr, it's a side effect of element creation. You need an html div so you need to tell d3 that by calling the element xhtml:div, once you do that, d3 will do the rest.

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./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>

Here's a simple example of a foreignObject used to insert HTML markup into an SVG:

<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/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>