为什么SVG textPath无法呈现? [devtools中为0x0]

我将此片段从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

dongmiao008s 回答:为什么SVG textPath无法呈现? [devtools中为0x0]

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

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

但是如何在rtl中使用它呢?

请参见this question,没有答案。

本文链接:https://www.f2er.com/3056982.html

大家都在问