여러 SVG 태그의 clipPath

각각에 동일한 ID로 다른 클립 경로를 정의하는 SVG 태그가 여러 개 있다고 가정합니다.여러 SVG 태그의 clipPath

<svg id="svg1" width="200" height="200"> 
    <defs> 
     <clipPath id="nodeclipper"> 
      <rect width="100" height="100" x="0" y="0" /> 
     </clipPath> 
    </defs> 
</svg> 

<svg id="svg2" width="200" height="200"> 
    <defs> 
     <clipPath id="nodeclipper"> 
      <circle cx="20" cy="0" r="40" /> 
     </clipPath> 
    </defs> 
</svg>

나는 또한 JSFiddle을 만들었습니다. 예상되는 행동은 무엇입니까? 나는 요소는 자신의 SVG 태그 안에 정의를 참조 할 수 있다고 생각하지만, 그 경우 될 것 같지 않습니다

크롬 26 : circle 클립 경로를 두 번 사용합니다.
Firefox 17 : 클립 경로를 두 번 사용합니다 (rect).
Safari 6 : rect과 예상대로 하나의 circle 클립 경로를 렌더링합니다.

당신 hide one of the SVG tags가 크롬과 사파리는 다음 완전히 clip-path을 드롭하기 때문에 때 이상한 가져옵니다.

clipPath에 다른 ID가 있지만 그 방식으로되어있을 때 작동한다는 것을 알고 있습니까? 지금까지 내가 보았 듯이 spec에는 문제에 대한 정보가 없습니다.

출처

2013-04-09 prayerslayer

당신이하고있는 것은이 직접이 특정 문제를 해결 http://www.w3.org/TR/2008/REC-xml-20081126/를 참조 http://www.w3.org/TR/SVG/struct.html#IDAttribute 당 유효 ... 타입 ID의

값은 이름 생산 일치해야합니다. 이름은 XML 문서에서이 유형의 값으로 두 번 이상 나타나서는 안됩니다. 즉, ID 값은 그 값을 지닌 요소를 고유하게 식별해야합니다 (MUST).

출처

2013-04-09 21:43:11

사양을 참조하십시오. 기술적으로는 올바르지 만 SVG 문서가 페이지에 삽입되는 방식과 관련하여 꽤 정신적 인 행동입니다. SVG는 다양한 출처에서 가져온 경우가 많으며 잠재적 인 충돌을 피하기 위해 모든 것을 네임 스페이스로 파싱하고 다시 pseudo-namespace해야하기 때문에 사용자에게 넘어지게됩니다. –

또한, 두 개의 별도 svg docs (xml)가 html doc (non-xml) 안에 있음을 감안할 때, 동일한 스펙에 속하는 것입니까? –

문서가 하나뿐입니다. –

여러 SVG 태그의 clipPath

답변

관련 문제