그룹의 색상을 다른 그룹 또는 요소에 채우기 색상으로 적용하는 필터

Question

소스 그룹의 모든 색상 그라데이션으로 직사각형을 채우고 싶습니다. 이 필터를 사용할 수는 있지만 작업을 완료 할 수는 없습니다.

<svg width="100" height="100"> 
    <defs> 
     <filter id="f1"> 
      <feBlend in="SourceGraphic" in2="url(#line)"/> 
     </filter> 
    </defs> 
    <g id="line"> 
     <line x1="10" y1="10" x2="20" y2="20" stroke="red"/> 
     <line x1="20" y1="20" x2="30" y2="10" stroke="orange"/> 
     <line x1="30" y1="10" x2="40" y2="20" stroke="green"/> 
     <line x1="40" y1="20" x2="50" y2="10" stroke="blue"/> 
    </g> 
    <g id="rect" filter="url(#f1)"> 
     <rect x="10" y="30" width="40" height="40" stroke="black" stroke-width="2"/> 
    </g> 
</svg> 

목표는 내 rect가 왼쪽에서 오른쪽으로 원본 줄 (빨강, 주황, 녹색 및 파랑)의 색으로 채워지는 것입니다. 골짜기의 근원 색깔은 항상 동일 하 :-) 나는 어떤 운도없이 feBlend, feFlood 및 feColorMatrix의 몇몇 버전을 시도했다.

Answer 1

필터 내에서 개체를 참조 할 수는 없으므로 먼저 feImage를 사용하여 개체를 가져와야합니다. Firefox에서는이 작업이 지원되지 않으며 IE에서는 크기가 때로는 불안정합니다. 또한 채우기 패턴을 데프에 넣어야합니다. 여기 사파리/크롬에서 작동 큰 버전입니다 - 당신이 좀 더 명확하게 효과를 볼 수 있도록 feTile를 추가 : 당신이 실제로 그라디언트 이러한 색상을 변환 할 경우 지금

<svg width="400px" height="400px"> 
    <defs> 

    <g id="line"> 
     <line x1="10" y1="10" x2="20" y2="20" stroke="red"/> 
     <line x1="20" y1="20" x2="30" y2="10" stroke="orange"/> 
     <line x1="30" y1="10" x2="40" y2="20" stroke="green"/> 
     <line x1="40" y1="20" x2="50" y2="10" stroke="blue"/> 
    </g> 
     <filter id="f1" x="0%" y="0%" height="100%" width="100%"> 
      <feImage xlink:href="#line" width="50" height="20" result="myPattern"/> 
      <feTile in="myPattern" result="tilePattern"/> 
      <feBlend mode="normal" in="tilePattern" in2="SourceGraphic"/> 
     </filter> 
    </defs> 

    <g id="rect" filter="url(#f1)"> 
     <rect x="10" y="30" width="300" height="300" stroke="black" stroke-width="2"/> 
    </g> 
</svg> 

, 당신은해야합니다 JavaScript에서 그렇게하십시오. 이론적으로 fillPaint와 strokePaint를 사용하여 필터에서이를 수행하는 방법이 있지만 IE와 Firefox에서만 지원됩니다. 나는 또한 당신이하고 싶은 것을 보여주는 이미지를 게시하는 것이 도움이 될 것입니다.

Answer 2

달성하려는 효과가 정확히 무엇인지 분명하지 않습니다. 이것은 당신이 한 일종의 효과입니까?

<svg width="100%" height="100%" viewBox="0 0 60 60"> 
    <defs> 
     <linearGradient id="f1"> 
      <stop offset="0.125" stop-color="red"/> 
      <stop offset="0.275" stop-color="orange"/> 
      <stop offset="0.625" stop-color="green"/> 
      <stop offset="0.875" stop-color="blue"/> 
     </linearGradient> 
    </defs> 
    <g id="rect" fill="url(#f1)"> 
     <rect x="10" y="30" width="40" height="40" stroke="black" stroke-width="2"/> 
    </g> 
    <g id="line"> 
     <line x1="10" y1="10" x2="20" y2="20" stroke="red"/> 
     <line x1="20" y1="20" x2="30" y2="10" stroke="orange"/> 
     <line x1="30" y1="10" x2="40" y2="20" stroke="green"/> 
     <line x1="40" y1="20" x2="50" y2="10" stroke="blue"/> 
    </g> 
</svg>