0

我正在尝试为 SVG 线设置动画，当我在使用 Vivus 对其进行动画处理后尝试修改线的坐标时会出现问题。我的目标是修改线的坐标（例如改变它的大小、位置）然后对其进行动画处理，并多次执行上述过程。

更改 SVG 线的属性的问题

  1. 创建 Vivus 对象 (new Vivus("win_line_svg", {type: 'oneByOne', duration: 30});)
  2. 尝试更改 SVG 行的属性（x1，y1，x2，y2）出错（无法读取未定义的属性 'baseVal'）

在创建 Vivus 对象之前尝试调整线条的大小会起作用。

您可以在 JSFiddle 中重现该问题：

  1. 点击播放按钮
  2. 单击“调整大小”按钮 =>（无法读取未定义的属性“baseVal”）

function play() {
  myVivus_Win_Line = new Vivus("win_line_svg", {
    type: 'oneByOne',
    duration: 30
  });
  myVivus_Win_Line.play();
}

function resize() {
  line = document.getElementById("line");
  line.y2.baseVal.value++;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.5/vivus.min.js"></script>
<button onclick="play()">Play</button>
<button onclick="resize()">Resize</button>

<!-- win line -->
<svg style="position: absolute; z-index:0; opacity: 100;" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" id='win_line_svg'>
  <line x1="50" y1="0" x2="50" y2="10" style="stroke:black;stroke-width:2" id='line' />
</svg>

4

0 回答 0