Применение градиента к нескольким элементам внутри элемента SVG

Question

Я пытаюсь создать стрелку, которая выглядит так, используя элементы SVG:

Это моя попытка:

Как вы можете видеть, градиент применяется как к прямоугольнику , так и к многоугольнику в моем SVG. Есть ли способ воспроизвести эффект градиента на верхнем изображении в моем SVG?

Может быть, есть способ CSS сделать это?Может быть, я ДОЛЖЕН использовать путь или один элемент Polygon для создания стрелки вместо rect & 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>

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

Answer 2

Я использовал два градиента, чтобы попытаться воссоздать то, что вы пытались сделать. Вы можете отрегулировать центр градиента, чтобы выровнять его по краям фигур:

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