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

Question

虽然HTML5现在支持ruby markup已有一段时间了，但我找不到有关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兼容标记格式。 canvas标签通常支持SVG，或至少支持它的子集。但是，如果您添加自己的标签，浏览器将无法识别。如果为浏览器编写插件或扩展程序的唯一方法，这可能超出您的能力。