在 SVG 中实现 rubi 的最佳方法是什么

Question

虽然HTML5支持Ruby标记已经有一段时间了，但我找不到任何关于SVG这种功能的信息。鉴于不支持此功能，在 SVG 中手动实现此功能的正确方法是什么？

Answer 1

您始终可以使用 <foreignObject> 元素将文本嵌入为 HTML。但是，我认为IE 11不支持这一点。

<svg width="500" height="200" viewBox="0 0 500 200">
  <path d="M10 10H480V180H10Z" fill="#ccf" stroke="#99f" stroke-width="10"/>
  <foreignObject x="10" y="10" width="480" height="180">
    <p xmlns="http://www.w3.org/1999/xhtml" style="font-size:50px; margin:30px 0 0 0; text-align:center;">ルビは<ruby><rb>簡単</rd><rt>かんたん</rt></ruby>です。</p>
  </foreignObject>
</svg>

Answer 2

SVG 是一种与 XML 兼容的矢量图形标记格式。画布标签通常支持 SVG，或者至少支持 SVG 的子集。但是，如果您添加自己的标签，浏览器将无法识别。为浏览器编写插件或扩展的唯一方法，这可能超出了您的能力。