Question

我正在使用textPath和tspans将文本放入svg路径中，它在Chrome中运行良好，但在Edge和FF中却没有那么多（o。任何帮助都会非常感激

这是一个ssg节点的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的开头应该是当前文本位置的绝对重置。你应该手动调整tsps的dy偏移量，使它们累积（而不是8pt，而不是8pt，它应该是8pt，16pt，24pt）。所以它实际上是一个Chrome错误，你的东西首先起作用。

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

textPath中的svg tspans在浏览器中的绘制方式不同

1 个答案: