html - 如何在 svg 中显示 html 编码值？

Question

我正在使用 d3 生成 svg 并最终得到类似于以下内容的标记：

<text class="rule" text-anchor="middle">&amp;pound;10K</text>

与按预期呈现的类似 html 进行比较。

<div>
    &pound;20,160 - &pound;48,069
</div>

我需要在 svg 标签上设置一个属性以获得类似类型的编码吗？我尝试向页面添加元标记，<meta name="content" content="application/xhtml+xml; charset=utf-8" />但这不起作用。

Answer 1

SVG 中没有定义 HTML 实体。您可以使用实际的 unicode 字符或使用该foreignObject元素将 HTML 嵌入到您的 SVG 中。

Answer 2

由于您使用的是 d3js，因此您也可以使用 unicode。

将文本附加到 span 的示例：

svg.append('span')
   .text('Pound: ' + '\u00A3' + ' or ' + '\uFFE1');