2013-06-16 3 views
2

SVG 요소에 여러 SVG 방사형 그래디언트를 적용하는 방법. 이 http://jsfiddle.net/4p9CK/을 위해 내가 만든 바이올린.여러 SVG 방사형 그래디언트

다음 옵션을 시도했지만 성공하지 못했습니다.

- <rect x="20" y="20" width="100" height="100" style="fill: 
    url(#center_origin),url(#center_origin2); stroke: black;"/> 

- <rect x="20" y="20" width="100" height="100" style="fill: 
    url(#center_origin, #center_origin2); stroke: black;"/> 
+0

어떻게 보이고 싶습니까? –

+0

나는 왼쪽 하단에있는 방사형 그래디언트 복사본을 원한다. 오른쪽 하단에있다. – rajkamal

+0

그라데이션 왼쪽 위와 다른 오른쪽 맨 아래에 2 개의 rects를 만들지 않겠습니까? –

답변

3

아니요. SVG는 하나의 요소에 여러 페인트 서버를 지원하지 않습니다. "페인트 서버"는 그라데이션, 패턴 등입니다. 불투명도 또는 필터를 사용하거나 형상을 기하학적으로 분할하여 여러 요소를 사용하고 원하는 효과를 시뮬레이트해야합니다.

+4

SVG 1.1은 실제로 여러 페인트 서버를 직접 지원하지 않습니다. 반면에 SVG2는 http://www.w3.org/2013/06/03-svg-minutes.html#item10을 참조하십시오. –

관련 문제