我在 SVG 元素中有一个foreignObject。所有其他元素都会显示，但foreignObject 及其内容是不可见的。在 Chrome、Firefox 和 Edge 中进行了测试，结果均相同。
这是代码：
<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:我究竟做错了什么？
UPDATE:我注意到一些事情：
- adding
xmlns="http://www.w3.org/1999/xhtml"输入使其显示在 Edge 上。在其他浏览器上，它仍然不可见。
- 在 Chrome 上，如果我编辑外部
<g>通过选择“编辑为 HTML”元素，但随后不进行任何更改并退出编辑模式，输入就会显示。
- adding
requiredExtensions="http://www.w3.org/1999/xhtml" to the foreignObject标签和/或正文标签没有区别。
我肯定错过了什么...
2019年答案：
-
foreignObject应该有x, y, width and height defined
- add
xmlns:xhtml="http://www.w3.org/1999/xhtml"给你的<svg ...标签定义
- SVG 中的所有 HTML 标签都应以
xhtml: prefix
Example:
<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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
