textPath 中的 svg tspan 跨浏览器绘制不同

Question

我正在使用 textPath 和 tspans 将文本放入 svg 路径，它在 Chrome 中效果很好，但在 Edge 和 FF 中效果不佳（o。任何帮助将不胜感激

这是 svg 节点的 jsfiddle： https://jsfiddle.net/ych9dr59/

这是相关的文本代码：

<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none">
    <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#text_5_4_5_1590" startOffset="50%">
        <tspan dy="-14pt">12): Maintain a</tspan>
    </textPath>

    <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#text_5_4_5_1590" startOffset="50%">
      <tspan dy="8pt">policy that</tspan> 
    </textPath>

    <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#text_5_4_5_1590" startOffset="50%">
       <tspan dy="8pt">addresses</tspan>
    </textPath>

   <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#text_5_4_5_1590" startOffset="50%">
    <tspan dy="8pt">information security</tspan>
    </textPath>

   <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#text_5_4_5_1590" startOffset="50%">
      <tspan dy="8pt">for all personnel. </tspan>
  </textPath>
    </text>

Answer 1

根据我的经验，SVG 文本元素总体上是非常错误的。我对最大跨浏览器完整性的建议是为每个文本片段使用单独的文本元素，并使用正常的 x/y 定位和变换/旋转来呈现您的文本。

Firefox 实际上是正确呈现的。根据 1.1 规范，每个新 textPath 的开始应该是当前文本位置的绝对重置。您应该手动调整 tspan 的 dy 偏移量，以便它们是累积的（而不是一个 8pt，它应该是 8pt、16pt、24pt）。所以实际上你的东西一开始就可以正常工作是一个 Chrome 错误。

Edge 似乎只支持每个文本元素一个 textPath 元素，因此您需要将每个 textPath 包装在其自己的文本元素中。