應用漸變到多個元素的SVG元素

Question

我試圖創建一個看起來像這樣使用SVG元素的箭頭內：

這是我的嘗試：

正如你所看到的，漸變應用於我的SVG中的矩形&多邊形。 有沒有辦法在SVG中的頂層圖像中複製漸變效果？

也許這是一個CSS方式來做到這一點？也許我必須使用路徑或單個多邊形元素來創建箭頭而不是一個矩形 & 多邊形？

<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> 

Answer 1

我用兩個漸變來嘗試重新創建你正在嘗試做的事情。您可以調整漸變的中心與形狀的邊緣對齊：

<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> 

Demo

有什麼錯一個single polygon關係嗎？

<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> 

Answer 2

您可以通過分組然後將它們的梯度應用於組

<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> 

codepen

「作」從兩個形狀的單一路徑