SVGの内側にコンポーネントを表示させようとして、やったらハマった。
普通にできるものだと勘違いしていたけれど、SVGの内側にはSVGが描画できるタグしか通常描画できない。なぜならSVGはSVG空間だから…。
結論
foreignObject
を使う。
<svg> <foreignObject width="16" height="16"> <MyAwesomeReactComponent xmlns="http://www.w3.org/1999/xhtml" /> </foreignObject> </svg>
大事なこととしては
foreignObject
自体にサイズの指定をするforeignObject
の子要素にxmlns="http://www.w3.org/1999/xhtml"
をつける
のがポイント。
SVG全然詳しくないのでなんか間違ってるかもしれないけれど、とりあえず描画できて助かった。