我正在嘗試為這個 svg 設定影片，使其具有“理發店”條紋影片。
這是我目前擁有的：
<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>但是我希望形狀而不是直線像這樣彎曲：
圖片
任何幫助將不勝感激
uj5u.com熱心網友回復：
在這里，我用省略號替換了兩條線。這是我最初的想法，但要同時獲得良好的曲線和顏色之間的相等空間并不容易。你可以看到，橙色比其他兩種顏色多一點。
<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>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/462462.html
上一篇：集合視圖的自定義影片