SVG 패턴의 색상을 변경하는 방법은 무엇입니까?

Question

사용시 패턴의 색상을 변경하고 싶습니다.

예를 들어, 빨간색 선이 녹색 인 원을 그리게됩니다.

<svg width="300" height="300" viewBox="0 0 300 300" 
    xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
    <pattern id="checked" width="2" height="2" stroke="black" stroke-linecap="square" stroke-width="1" patternTransform="rotate(45) scale(2)" 
     patternUnits="userSpaceOnUse"> 
     <line x1="0" y1="0" x2="0" y2="2"></line> 
     <line x1="0" y1="0" x2="2" y2="0"></line> 
    </pattern> 
    </defs> 
    <circle cx="60" cy="60" r="50" stroke="red" fill="url(#checked)"/> 
    <circle cx="120" cy="60" r="50" stroke="blue" fill="url(#checked)"/> 
</svg> 

http://codepen.io/anon/pen/RVNmRY

도 모든 색상의 새로운 패턴을 만들 필요없이 그렇게 할 수 있습니까?

나는 필터 (https://stackoverflow.com/a/21427316/1981832)를 사용하여 가능할 수도 있다는 의견을 읽었습니다. 하지만 어떻게해야할지 모르겠다.

Answer 1

다음은 "블루 스크린"기술을 사용하여 필터가있는 모양을 다시 칠하는 방법입니다. 필터는 빨간색 구성 요소 만 남기고 (매트릭스의 첫 번째 1) 파란색을 녹색으로 변환하고 (다음 "1") 불투명도를 변경하지 않습니다 (마지막 "1"). 이 특정 필터는 분명히 예제에서만 작동하지만 다른 소스로 변환 될 색상으로 특정 소스 색상을 사용하는보다 일반적인 필터를 작성할 수 있습니다.

는

<svg width="300" height="300" viewBox="0 0 300 300" 
 
    xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
    <filter id="blue-to-green"> 
 
    <feColorMatrix type="matrix" values="1 0 0 0 0 
 
              0 0 1 0 0 
 
              0 0 0 0 0 
 
              0 0 0 1 0"/> 
 
    </filter> 
 
    
 
    <pattern id="checked" width="2" height="2" stroke="blue" stroke-linecap="square" stroke-width="1" patternTransform="rotate(45) scale(2)" 
 
     patternUnits="userSpaceOnUse"> 
 
     <line x1="0" y1="0" x2="0" y2="2"></line> 
 
     <line x1="0" y1="0" x2="2" y2="0"></line> 
 
    </pattern> 
 
    </defs> 
 
    
 
    <circle cx="60" cy="60" r="50" stroke="red" fill="url(#checked)" filter="url(#blue-to-green)"/> 
 
    <circle cx="120" cy="60" r="50" stroke="blue" fill="url(#checked)"/> 
 
</svg>