具有弯曲形状的 SVG 条纹动画

Question

我正在尝试为这个 svg 制作动画，以获得 'barbershop' 条纹动画。

这是我目前拥有的：

<svg width="300" height="300" viewBox="0 0 120 120">
    <pattern id="diagonalHatch" width="30" height="10" 
     patternTransform="rotate(30)" patternUnits="userSpaceOnUse">
         <animate attributeName="x" from="0%" to="100%" dur="5s" repeatCount="indefinite"/>
         <rect width="100%" height="100%" fill="#FB5D2E"></rect>
         <line x1="5" x2="5" y2="10" style="stroke:#16B4F2; stroke-width:10" />
         <line x1="15" x2="15" y2="10" style="stroke:#19214D; stroke-width:10" />
    </pattern>
    <path d="M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" stroke="none" fill="url(#diagonalHatch)" stroke-width="10"/>
</svg>

但是我希望形状而不是直线像这样弯曲：

image

如有任何帮助，我们将不胜感激

Answer 1

这里我用省略号替换了这两行。这是我最初的想法，但要同时获得良好的曲线和颜色之间相等 space 并不容易。可以看到，橙色比其他两种颜色多一点。

<svg width="300" height="300" viewBox="0 0 120 120">
    <pattern id="diagonalHatch" width="20" height="50" y="-15" 
     patternTransform="rotate(30)" patternUnits="userSpaceOnUse">
         <animate attributeName="x" from="0%" to="100%" dur="5s" repeatCount="indefinite"/>
         <rect width="100%" height="100%" fill="#FB5D2E"></rect>
         <ellipse cx="0" cy="25" rx="15" ry="20" stroke="#19214D" fill="transparent" stroke-width="6"/>
         <ellipse cx="0" cy="25" rx="9" ry="15" stroke="#16B4F2" fill="transparent" stroke-width="6"/>
    </pattern>
    <path d="M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" stroke="none" fill="url(#diagonalHatch)" stroke-width="10"/>
</svg>

具有弯曲形状的 SVG 条纹动画

SVG Stripe Animation with curved shapes

html

css

animation

svg

svg-animate