为啥 SVG textPath 不呈现？ [开发工具中的 0x0]

Posted 2023-02-22

【中文标题】为啥 SVG textPath 不呈现？ [开发工具中的 0x0]

【英文标题】：Why is SVG textPath not rendering? [0x0 in devtools]为什么 SVG textPath 不呈现？ [开发工具中的 0x0]

【发布时间】：2020-03-17 13:44:57

【问题描述】：

我将这个 sn-p 从 Mozilla 复制到 Vue 组件。

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path id="MyPath" fill="none" stroke="red"
        d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
  <text>
    <textPath href="#MyPath">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>

</svg>

但是 <textPath> 没有出现，只有 <path> 呈现。

我尝试设置显式宽度、显示、溢出等，但无济于事。它的宽度和高度保持为 0x0。

这让我很难过，因为当不使用 Vue 时，相同的 sn-p 在其他选项卡中也可以工作。

澄清一下：我正在使用 Vue 和 Gridsome。

【问题讨论】：

无法复制 - codepen.io/Paulie-D/pen/pooYGRr

@Paulie_D 正如我所写，这个问题只发生在 Vue 组件中。

那么我建议你必须演示一下。

在 Vue 组件中似乎可以正常工作：jsfiddle.net/uv10f6ap/1

可能是与网格相关的问题

【参考方案1】：

经过一个小时的调试，我找到了问题的原因：当body有dir="rtl"时，文本不呈现。

我所要做的就是将 SVG 的方向重置为 ltr。

但是我怎样才能让它在rtl中工作？？？

见this question，无人接听。