[英]Apply Gradient to more than one element inside an SVG Element
我正在嘗試使用SVG元素創建一個看起來像這樣的箭頭:
這是我的嘗試:
如您所見,漸變已同時應用於我的SVG中的rect和多邊形 。 是否可以在SVG的頂部圖像中復制漸變效果?
也許有一種CSS方式可以做到這一點? 也許我必須使用路徑或單個多邊形元素來創建箭頭,而不是rect & 多邊形 ?
<svg width="424" height="100">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(13,20,93); stop-opacity:1" />
</radialGradient>
</defs>
<rect x="0" y="25" rx="0" ry="0" width="212" height="50" fill="url(#grad1)"> </rect>
<polygon points="212,0 212,100 424,50" fill="url(#grad1)"></polygon>
</svg>
您可以通過將兩個形狀分組來“制作”單個路徑,然后將漸變應用於該組
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="424"
height="100"
id="svg2996">
<defs>
<radialGradient cx="0.5" cy="0.5" r="0.5" fx="0.5" fy="0.5" id="grad1">
<stop style="stop-color:#ffffff;stop-opacity:0" offset="0" />
<stop style="stop-color:#0d145d;stop-opacity:1" offset="1" />
</radialGradient>
<radialGradient cx="212" cy="50" r="212" fx="212" fy="50" id="radialGradient3809" xlink:href="#grad1"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1,0,0,0.23584906,0,38.207547)" />
</defs>
<g style="fill:url(#radialGradient3809);fill-opacity:1">
<rect width="212" height="50" rx="0" ry="0" x="0" y="25" />
<polygon points="424,50 212,0 212,100 " />
</g>
</svg>
我使用了兩個漸變來嘗試重新創建您想要做的事情。 您可以調整漸變的中心以使其與形狀的邊緣對齊:
<svg width="424" height="100">
<defs>
<radialGradient id="grad1" cx="100%" cy="50%" r="100%" fx="100%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(13,20,93); stop-opacity:1" />
</radialGradient>
<radialGradient id="grad2" cx="0%" cy="50%" r="50%" fx="0%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(13,20,93); stop-opacity:1" />
</radialGradient>
</defs>
<rect x="0" y="25" rx="0" ry="0" width="212" height="50" fill="url(#grad1)"> </rect>
<polygon points="212,0 212,100 424,50" fill="url(#grad2)"></polygon>
</svg>
單個多邊形有問題嗎?
<svg width="424" height="100">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(13,20,93); stop-opacity:1" />
</radialGradient>
</defs>
<polygon points="212,0 212,25 0,25 0,75, 212,75 212,100 424,50" fill="url(#grad1)"></polygon>
</svg>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.