我通过 foreignobject
将 HTML 嵌入到 SVG 中:
var SvgWithForeignObject = React.createClass({
render: function() {
return(
<svg>
<foreignobject><div>Hello From SVG</div></foreignobject>
</svg>
)
}
});
ReactDOM.render( < SvgWithForeignObject / > ,
document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
“Hello From SVG”字符串未呈现。但是,我可以在 Chrome 或 FF 中进行较小的空白编辑,然后它就会变得可见:
(注意:屏幕录制来 self 通过 Scala.js 使用 React 的示例,但行为与普通 React 完全相同)
最佳答案
SVG 区分大小写,您要使用的元素称为 foreignObject
。注意大写的 O。
此外,您还必须在此元素上设置 width
和 height
属性。
最后,不要忘记在根 HTML 元素上设置 xmlns="http://www.w3.org/1999/xhtml"
。
var SvgWithForeignObject = React.createClass({
render: function() {
return(
<svg>
<foreignObject width="400" height="400"><div xmlns="http://www.w3.org/1999/xhtml">Hello From SVG</div></foreignObject>
</svg>
)
}
});
ReactDOM.render( < SvgWithForeignObject / > ,
document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
关于reactjs - react 与 SVG : HTML inside foreignobject not rendered,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39504988/