Question

我正在尝试使用路径在SVG中为线条设置动画。我能够水平画一条线，但我没有得到如何使它以直角垂直转动。（箭头从最左边开始然后转到90度）

如果我更改了animate部分中的“values”，它也会弄乱水平线，或者动画不起作用。我没有得到我做错的事。我能够使用两个单独的SVG实现这一点，即一个用于水平线，一个用于垂直线，但我想在一个中完成。

Codepen link for horizontal and vertical line (separate)

<div>
    <svg>
        <defs>
            <marker id="arrow"orient="auto" viewBox="0 0 10 10" markerWidth="6" markerHeight="8" markerUnits="strokeWidth" refX="1" refY="5">
                <polyline points="0,0 10,5 0,10 1,5" fill="#d9272d" />
            </marker>
        </defs>
        <path id="line" marker-end="url(#arrow)" stroke-width="2" fill="none" stroke="#d9272d">
            <animate dur="3s" repeatCount="1" attributeName="d" values="M0,10 L10,10;M10,10 L140,10;" fill="freeze"/>
        </path>
    </svg>
</div>

SVG线条动画（直角）

0 个答案: