SVG 객체는 채우기 색상과 채우기 패턴을 모두 가질 수 있습니까?

Question

난 Raphael 라이브러리를 사용하여 SVG와 함께 일하고있다. (라파엘 문서는 언급하지 않지만)

circle.attr({fill: "#ff0000"}); 

을 그리고 이것은 또한 작동합니다 : 난과 같이 객체에 채우기 색을 적용 할 수 있습니다 내가 투명 PNG 파일을 사용할 수 있어요

circle.attr({fill: "url(pattern.png)"}); 

채우기 패턴 및 투명도가 예상대로 작동합니다. 채우기 패턴 이미지가 투명하면 svg 객체가 완전히 투명합니다. 하지만 필자가하고자하는 것은 채우기 패턴 이미지와 채움 색상을 모두 지정하는 것이므로 패턴 이미지가 투명 한 곳을 통해 색상이 표시되도록합니다 (예 : CSS를 사용하는 'background'속성과 유사). SVG로 가능합니까?

Answer 1

채우기가있는 직사각형과 해당 직사각형 위에 PNG 인 이미지를 정의 할 수 있습니다. 그런 다음 패턴을 원 (또는 원하는 요소)의 채우기로 사용합니다.

Raphaël 외부로 이동하거나 원하는대로 확장하는 것을 의미합니다. ({fill: "url(pattern.png)"})이하는 일은 패턴 요소를 만들고 주어진 URL을 가리키는 이미지 요소를 추가하는 것입니다. Raphaël을 해킹하여 색상을 전달할 수도 있으며 주어진 채우기 색상의 이미지와 동일한 크기의 사각형을 만들어 패턴을 만드는 코드를 처리 할 수 ​​있습니다.

IE < 9로 작동 시키려면 VML로 구현해야 할 것입니다.

다른 옵션에는 색상 채우기와 래스터 이미지 채우기가있는 두 개의 도형 그리기가 포함됩니다. 또 다른 방법은 투명하지 않도록 배경색을 PNG에 포함시키는 것입니다.