Vue，SVG元素在Firefox中不会更新

Question

这是示例https://codesandbox.io/s/4xwv953mv0

共有三行。原来的一个隐藏，第二个通过id xlink：href =“＃line”链接到第二个，第二个以相同的方式链接。

移动滑块，这些行将在Chrome中上升，而只有一行将在Firefox中上升。

如果是Firefox错误，该怎么办？有没有办法用Vue更新SVG？

Answer 1

是的。这是一个已知的Firefox错误。 Firefox bug report here和here。

虽然这里有一个简单的解决方法。只需更改您的第二次使用，使其直接指向<line>，而不是指向<use>。

    <use
      id="Svg"
      xlink:href="#line"
      transform="translate(40,10)"
    ></use>

顺便说一句。我建议您将行放在<defs>节中，而不要用display:none隐藏它。这就是<defs>的目的，在某些情况下使用display:none可能会带来意想不到的后果。

  <defs>
    <line
      id="line"
      x1="0"
      y1="0"
      x2="100"
      :y2="value"
      vector-effect="non-scaling-stroke"
    />
  </defs>