CODEWITHSUNDEEP
d3.jssvg
Olivvv
Olivvv

Reputation: 1200

Why is a foreignObject in a text node not visible?

I have text and a foreignObject in a text node. I see the text ("blabla"), but not the foreignObject content ("Hello").

How can I debug this?

<svg>
  <text class="circle-label" style="display: inline;" transform="translate(100,20)">blabla
    <foreignObject width="200" height="100" fill="red">
      <div>Hello</div>
    </foreignObject>
  </text>
</svg>

Upvotes: 0

Views: 237

Answers (1)

altocumulus
altocumulus

Reputation: 21578

The SVG 1.1 spec allows the following element types inside a <text> element:

Content model:

Any number of the following elements, in any order:
animation elements
descriptive elements
text content child elements
‘a’

Since the <foreignObject> is uncategorized in terms of the spec, it does not belong to any of those categories, and must, therefore, not be nested inside a <text> element.

According to the spec only container elements may contain a <foreignObject> element. This category comprises the following element types: <a>, <defs>, <g>, <marker>, <mask>, <missing-glyph>, <pattern>, <svg>, <switch>, and <symbol>.

Upvotes: 4

Related Questions