下面是polygon定義的 a 和定義的used，同樣linearGradient適用于它和 a line：
- 該
polygon是use技術了，因為會有很多類似的思路。 - 箭頭使用漸變填充的原因是因為它會
line隨著線條的繪制而沿著 的路徑進行影片處理，所以希望它的填充隨著它的移動而改變gradientUnits="userSpaceOnUse"。（我計劃使用這種優秀技術的派生。）
（line實際上將是一個更復雜的多角度，polyline但這段代碼簡化了事情。）
此代碼筆通過一些變體和注釋演示了視覺結果。
.line {
fill: none;
stroke-width: 60px;
stroke: url(#grad);
}
.head-grad {
fill: url(#grad);
}<svg viewBox="0 0 1600 200">
<defs>
<polygon id="head" points="0 0, 42 0, 92 50, 42 100, 0 100, 50 50, 0 0"/>
<linearGradient id="grad" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#901500"/>
<stop offset="0.9" stop-color="#eb7500"/>
</linearGradient>
</defs>
<line class="line" x1="1540" y1="100" y2="100"/>
<use href="#head" class="head-grad" x="1490" y="50"/>
</svg>誰能解釋我哪里出錯了，或者是否有另一種方法更適合讓箭頭的填充匹配它在線上的相對位置？
uj5u.com熱心網友回復：
在此示例中，我將線條和箭頭組合在一個蒙版中。兩個元素都是白色的，所以 100% 透明。蒙版用于<rect>具有漸變的 a。我不知道這是否適用于您的情況？簡單的線可以替換為任何其他形狀，例如您所說的折線。
影片可以應用于蒙版。在出色的技術中，我可以看到線和箭頭之間存在抓地力。使用面膜可以避免這種情況。
<svg viewBox="0 0 1600 200">
<defs>
<polygon id="head" points="0 0, 42 0, 92 50, 42 100, 0 100, 50 50, 0 0"/>
<linearGradient id="grad" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#901500"/>
<stop offset="0.9" stop-color="#eb7500"/>
</linearGradient>
<mask id="m1">
<line x1="1540" y1="100" y2="100" stroke="white" stroke-width="60"/>
<use href="#head" x="1490" y="50" fill="white"/>
</mask>
</defs>
<rect width="1600" height="200" mask="url(#m1)" fill="url(#grad)"/>
</svg>更新
在下一個示例中，我使用上面的蒙版并為其設定影片。將箭頭的運動路徑與路徑上的 stroke-dasharray 影片相結合。
<svg viewBox="0 0 180 180" height="500" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#901500" />
<stop offset="0.9" stop-color="#eb7500" />
</linearGradient>
<path id="curve" d="M 20 130 L 40 80 L 60 90 L 80 60 L 100 80 L 120 30 L 140 40 L 160 10" fill="none" pathLength="100" />
<mask id="m1">
<use href="#curve" stroke-dasharray="0 0" stroke="white" stroke-width="3">
<animate attributeName="stroke-dasharray" values="0 100;100 100" dur="6s" fill="freeze" />
</use>
<path d="M -3 -3 L -0.5 -3 L 3 0 L -0.5 3 L -3 3 L 0 0 Z" fill="white">
<animateMotion dur="6s" fill="freeze" rotate="auto">
<mpath href="#curve" />
</animateMotion>
</path>
</mask>
</defs>
<rect width="100%" height="100%" fill="url(#grad)" mask="url(#m1)" />
</svg>uj5u.com熱心網友回復：
@chrwahl 好心地提供了一些答案，但是隨著我的箭頭沿著它們的路徑轉換translate(x,y)，我最終部署gradientTransform="translate(-x,0)"了一個linearGradient專用于每個箭頭的箭頭。
結果顯示在這個 codepen 中。
代碼摘錄，沒有隨附的 JS，來自那支筆：
.rarr__line {
fill: none;
stroke-width: 60px;
}
.rarr-bg {
fill: #901600;
}
.rarr-3 .rarr__line {
stroke: url(#rgrad-3l);
}
.rarr-3 .rarr__head {
fill: url(#rgrad-3h);
}<svg viewBox="0 0 1600 900">
<defs>
<symbol id="rarr" viewbox="0 0 92 100">
<polygon points="0 0, 42 0, 92 50, 42 100, 0 100, 50 50, 0 0" />
</symbol>
<linearGradient id="rgrad-3l" y1="380" x2="1540" y2="380" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#901500"/>
<stop offset="1" stop-color="#eb7500"/>
</linearGradient>
<linearGradient id="rgrad-3h" y1="380" x2="1540" y2="380" gradientUnits="userSpaceOnUse" gradientTransform="translate(-1490,0)">
<stop offset="0" stop-color="#901500"/>
<stop offset="1" stop-color="#eb7500"/>
</linearGradient>
</defs>
<rect class="rarr-bg" width="1600" height="900"/>
<g class="rarr-3 major">
<polyline class="rarr__line" points="0 430, 1000 430, 1100 330, 1540 330" />
<use href="#rarr" viewbox="0 0 92 100" width="92" height="100" class="rarr__head" x="1490" y="280" data-grad="rgrad-3h" />
</g>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/409220.html
標籤：
上一篇：SWIFT“三級陣列”