Menu
I have a foreignObject in an SVG element. All other elements show, but the foreignObject is invisible along with its content. Tested in Chrome, Firefox and Edge, all with the same result.
Here is the code:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="v-2" width="100%" height="100%">
<g id="v-3" class="joint-viewport" transform="matrix(1,0,0,1,-1597.0002028000001,95.99995439999998)">
...
<g id="j_29" model-id="e8dbd7a4-5d3d-44e5-85a0-09413112a39b" class="joint-theme-default joint-cell joint-type-html joint-type-html-element joint-element" data-type="html.Element" fill="#ffffff" stroke="none" transform="translate(1898.0001898,268.0000346)">
<g class="rotatable" id="v-206">
<rect class="body" id="v-207" stroke="none" fill-opacity="0" fill="#ffffff" width="100" height="60"></rect>
<text class="label" id="v-208" font-size="14" y="0.8em" display="none" xml:space="preserve" fill="#000000" text-anchor="middle" font-family="Arial, helvetica, sans-serif" transform="matrix(1,0,0,1,125,20)">
<tspan id="v-209" class="v-line v-empty-line" dy="0em" x="0" style="fill-opacity: 0; stroke-opacity: 0;">-</tspan>
</text>
<foreignObject requiredExtensions="http://www.w3.org/1999/xhtml" width="100%" height="100">
<body xmlns="http://www.w3.org/1999/xhtml">
<input xmlns="http://www.w3.org/1999/xhtml" type="text" value="I'm HTML input">
</body>
</foreignObject>
</g>
</g>
</g>
<defs id="v-4"></defs>
</svg>
Q: What am I doing wrong?
UPDATE: I noticed a few things:
xmlns="http://www.w3.org/1999/xhtml" to the input makes it show on Edge. On other browsers, it is still invisible.<g> element by selecting "Edit as HTML", but then make no changes and get out of the editing mode, the input shows up.requiredExtensions="http://www.w3.org/1999/xhtml" to the foreignObject tag and/or the body tag makes no difference.I must be missing something...
603
2019 year answer:
foreignObject should have x, y, width and height definedxmlns:xhtml="http://www.w3.org/1999/xhtml" to your <svg ... tag definitionxhtml: prefixExample:
<svg class="front" viewBox="0 0 376 244" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xhtml="http://www.w3.org/1999/xhtml">
...
<foreignObject x="0" y="165" width="100%" height="38">
<xhtml:span class="copy-popover">Click to Copy</xhtml:span>
</foreignObject>
...
</svg>
The trick is to remove requiredExtensions="http://www.w3.org/1999/xhtml from the foreignObject tag. Chrome does not show any content when this attribute is present, but when it is removed it works on Chrome, IE and Firefox.
Unfortunately I hit another bug on Chrome (where it renders the input's content in a strange place when the text overflows), so I won't use foreignObjects anymore for this, but just in case anyone is curios, that is how I worked the initial issue around.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With