是否可以創建適用于整個組而不是每個單獨部分的水平漸變？我正在嘗試構建一個由多個矩形組成的進度條，中間有空格（請參見代碼片段），但除非我為每個不理想的人創建邏輯，否則這似乎是不可能的
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" preserveAspectRatio="none" width="100%" height="100%">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100sv%" y2="0%">
<stop offset="50%" stop-color="green" />
<stop offset="50%" stop-color="black" />
</linearGradient>
</defs>
<defs>
<linearGradient id="grad2" x1="0" x2="0" y1="0" y2="1">
<stop offset="50%" stop-color="green"/>
<stop offset="50%" stop-color="black" />
</linearGradient>
</defs>
<g fill="url(#grad1)">
<rect x="10" y="1" width="6" height="15" />
<rect x="20" y="1" width="6" height="15" />
<rect x="30" y="1" width="6" height="15" />
<rect x="40" y="1" width="6" height="15" />
<rect x="50" y="1" width="6" height="15" />
</g>
</svg>
<p>desired look</p>
<div style="display: flex; flex-direction: row">
<div style="width: 6px; height: 15px; margin-right: 5px; background-color: green"></div>
<div style="width: 6px; height: 15px; margin-right: 5px; background-color: green"></div>
<div style="width: 6px; height: 15px; margin-right: 5px; background-color: green"></div>
<div style="width: 6px; height: 15px; margin-right: 5px; background-color: black"></div>
<div style="width: 6px; height: 15px; margin-right: 5px; background-color: black"></div>
</div>uj5u.com熱心網友回復：
設定屬性gradientUnits="userSpaceOnUse"并使用圖形最左側的坐標為 x1 ( x1="10") resp。x2="56"x2 ( )的最右邊。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" preserveAspectRatio="none" width="100%" height="100%">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" id="grad1"
x1="10" y1="0" x2="56" y2="0">
<stop offset="50%" stop-color="green" />
<stop offset="50%" stop-color="black" />
</linearGradient>
</defs>
<g fill="url(#grad1)">
<rect x="10" y="1" width="6" height="15" />
<rect x="20" y="1" width="6" height="15" />
<rect x="30" y="1" width="6" height="15" />
<rect x="40" y="1" width="6" height="15" />
<rect x="50" y="1" width="6" height="15" />
</g>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/486846.html
標籤：svg
上一篇：分隔svg檔案的各個部分
下一篇：用于svg路徑減法的掩碼復合