나는이 사용 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

두 개의 그라데이션을 사용하여 수행하려는 작업을 다시 시도했습니다. 당신은 모양의 가장자리에 정렬 그라디언트의 중심을 조정할 수 있습니다 : 비록 single polygon에 문제가

<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

있습니까?

<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

에 그라데이션을 적용 그룹화하여이 개 모양에서 하나의 경로를 "만들"수