我想得到這樣的東西
我已經嘗試使用 strokeDashoffset 和 strokeDasharray 但我仍然無法得到它，我可以繪制多條線但我將有一個腳本必須填充這些線
有什么想法我該怎么做？謝謝
我不知道你是否需要它，但這是我嘗試過的：
<svg id="edilRW8EQ5h1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 54 12.5" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
<path strokeDasharray="10, 10" strokeDashoffset="10" pathLength="500" d="M0,6.25h54v2.134695h-54L0,6.25" fill="white" stroke="#3f5787" stroke-width="0.5"/>
</svg>uj5u.com熱心網友回復：
這看起來很像一個<pattern>. 在這里，我使用了 a 上的圖案，<rect>同時<rect>a 也有一個蒙版。蒙版具有控制白度的漸變。
它看起來有點像一米。儀表的“值”現在可以通過漸變中的兩個停止元素的值（此處為 76%）來控制。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 8">
<defs>
<pattern id="p1" viewBox="0 0 6 10" width="5%" height="100%">
<path transform="translate(4 0) rotate(10)" d="M 0 0 V 10"
stroke-width="4" stroke="white" stroke-linecap="round"/>
</pattern>
<linearGradient id="g1" gradientTransform="rotate(1.5)">
<stop offset="0" stop-opacity=".2" stop-color="white" />
<stop offset="76%" stop-opacity="1" stop-color="white" />
<stop offset="76%" stop-opacity=".2" stop-color="white" />
<stop offset="100%" stop-opacity=".2" stop-color="white" />
</linearGradient>
<mask id="m1">
<rect width="50" height="8" fill="url(#g1)"/>
</mask>
</defs>
<rect width="50" height="8" fill="black"/>
<rect width="50" height="8" fill="url(#p1)" mask="url(#m1)"/>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/533200.html
標籤：htmlcsssvg