Vue, элемент SVG не обновляется в Firefox

Question

Это пример https://codesandbox.io/s/4xwv953mv0

Есть три строки.Первоначальный скрыт, второй связан с ним по идентификатору xlink: href = "# line", третий связывает второй таким же образом.

Переместите ползунок, строки в Chrome поднимутся вверх, ив Firefox будет только один.

Если это ошибка Firefox, что делать?Есть ли способ обновить SVG с помощью Vue?

Answer 1

Да.Это известная ошибка Firefox. Отчет об ошибке Firefox здесь и здесь .

Здесь есть простое исправление.Просто измените ваше второе использование так, чтобы оно указывало на <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>