意外なやり方だったのでメモしておく。

方法

次のようなsvg#screen1にHTML文字参照を含むコンテンツを持つtext要素を追加したい場合、

text要素をcreateElementNSで生成したらinnerHTMLでコンテンツをセットする。

これで"test@foo"が表示される。

見つけた経緯

レイアウトの調整のために、直接タグを書いていたときには問題なく表示できていた。

<svg width="400" height="20">
  <text x="0" y="16" fill="black">test&#x0040;foo</text>
</svg>

動的に描画するためにtextContentやcreateTextNodeを使ったら、"&"が"&"になるので、"test@foo"と表示されてしまった。

直接タグを書いていた時にはできていたので何かあるはずと思って、text要素のインスタンスのプロパティを直接見たらinnerHTMLがあった（SVGの要素なのに）。

W3Cとかでこのあたりの資料探してみたけどいまいち見つからない...

上記のことを踏まえて、dangerouslySetInnerHTMLを使えば実現できる。

次のブラウザで表示できるのを確認した。