Question

我正在尝试动画（转换）SVG路径/线的“绘图”。我要绘制的特定线将向右移动300px，然后向下延伸100px，然后向左移动200px。但它将是一条连续的线，没有曲线或断点。

目前，我可以通过单独构建线路并应用转换来使其工作。从X1，Y1 / X2，Y2开始 - 过渡到新的X2，Y2 - 在此期间，使用此延迟，重复，重复和重复。

有更简单的方法吗？例如，使用单个SVG元素而不是3并从数组中填充X / Y坐标？

任何具体的例子或指向我的一般方向将不胜感激。

由于

Answer 1

这完全有可能，虽然获得你想要的效果有点古怪。它涉及设置一个非常大的stroke-dash-array（实际上是你路径的整个长度）然后设置dash-offset（也是你的形状的长度）。您可以将此设置为最初没有任何一条线可见的点，并更改破折号偏移量以使该线进入视图。

关于CSS Tricks SVG Line Animation的一篇非常好的文章解释了这个原则。我在D3中为我写了一个小帮手，看起来像这样：

d3.selectAll(".draw")
  .style("stroke-dasharray", function () { return this.getTotalLength(); })
  .style("stroke-dashoffset", function () { return this.getTotalLength(); })
  .transition()
  .duration(3000)
  .style("stroke-dashoffset", 0);

.draw {
    fill: #232a29;
    stroke: #232a29;
    stroke-width: 2px;
    fill-rule:nonzero;
    fill-opacity:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="500" height="500">
    <g>
        <g transform="translate(0,600)scale(1,-1)">
            <!-- Circle -->
            <path class="draw circle" d="m 97.44,308.52 c 0,90.53 73.42,163.92 163.98,163.92 90.56,0 163.98,-73.39 163.98,-163.92 0,-90.53 -73.42,-163.92 -163.98,-163.92 -90.56,0 -163.98,73.39 -163.98,163.92 z" />
            </g>
    </g>
</svg>

在水平和垂直方向上制作连续线的动画

1 个答案: