css - 为什么 SVG textPath 不渲染？ [开发工具中的 0x0]

Question

我从 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 的情况下，相同的代码片段在其他选项卡中也能正常工作。

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

Answer 1

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

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

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

参见 this question , 没有回答。