Question

我是SVG的新手。我试图将直线设置为曲线线。我已经按照一些链接但找不到合适的方法来做到这一点。以下是我的代码：

<svg width="100%" height="960px">
    <path id="shape" d="M0 0 C0 0, 0 00, 400 0" stroke="black" fill="transparent" stroke-width="1" vector-effect="non-scaling-stroke">
    <animate  
             attributeName="d"
             dur="500ms"
             begin="indefinite"
             repeatCount="1"
             to = "M0 0 C0 0, 165 50, 400 0"
             id="test" />
  </path>
</svg>

我也用过：

values="M0 0 C0 0, 0 00, 400 0; M M0 0 C0 0, 165 50, 400 0;"

在animate标记中，但它仍无法正常工作。

问题是：我无法使路径弯曲，动画发生一次，然后路径再次变直，我不知道如何在不同的屏幕尺寸上制作相同的曲线。

Answer 1

如果你使用begin =＆＃34; indefinite＆＃34;除了通过javascript，动画不会开始。为了演示我设置的东西begin =＆＃34; 1s＆＃34;

如果您希望动画保持在最终位置，则添加fill =＆＃34;冻结＆＃34;它。

如果您希望它使用不同的屏幕尺寸，请使用viewBox。

＆＃13;

<svg width="100%" height="960px" viewBox="0 0 500 500" preserveAspectRatio="none">
    <path id="shape" d="M0 0 C0 0, 0 00, 400 0" stroke="black" fill="transparent" stroke-width="1" vector-effect="non-scaling-stroke">
    <animate  
             attributeName="d"
             dur="500ms"
             begin="1s"
             repeatCount="1"
             fill="freeze"
             to = "M0 0 C0 0, 165 50, 400 0"
             id="test" />
  </path>
</svg>

＆＃13;

为不同的屏幕尺寸设置动画SVG路径

1 个答案: