Reactコンポーネントをsvg要素の内側に表示する

SVGの内側にコンポーネントを表示させようとして、やったらハマった。

普通にできるものだと勘違いしていたけれど、SVGの内側にはSVGが描画できるタグしか通常描画できない。なぜならSVGSVG空間だから…。

結論

foreignObjectを使う。

developer.mozilla.org

<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全然詳しくないのでなんか間違ってるかもしれないけれど、とりあえず描画できて助かった。