크롬 경로가 2 개 이상있는 SVG clipPath 38

최신 Chrome으로 업데이트 한 후 내 SVG 아이콘에 대해 알지 못합니다. Safari와 Firefox에서는 여전히 내가 지원하는 다른 브라우저 만 올바르게 표시됩니다. 테스트 해본 이전 버전의 Chrome에서 완벽하게 작동했습니다.크롬 경로가 2 개 이상있는 SVG clipPath 38

아이콘이 예상대로 렌더링되지 않는 예제에서는 clipPath 요소 내에 경로 요소가 두 개 이상 있음을 나타냅니다. 에 따르면 : https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath 나는이 권리를하고 있다고 믿을 수 있도록 clipPath 안에 허용되는 요소를 몇 개나 배치 할 수 있습니다 ... 그래서 갑자기 왜 나를 망가 뜨 렸는지에 관해서는 알지 못합니다.

그래서 기본적으로 당신이 ... 당신이 킬 (kill) 바퀴벌레와 눈의 공을 볼 수 있습니다 이미지 봐 그들이 지금 오른쪽에 렌더링하는 방법을 왼쪽에 예상과 다른 보면

http://codepen.io/dapinitial/pen/Kflpv

<svg> 
    <defs> 
    <clipPath id="diff-path"> 
     <path d="M17.19,7.349 C18.753,7.349 20.019,8.626 20.019,10.202 C20.019,11.777 18.752,13.056 17.19,13.056 C15.628,13.056 14.361,11.778 14.361,10.202 C14.361,8.625 15.627,7.349 17.19,7.349 L17.19,7.349 L17.19,7.349 Z" /> 
     <path d="M0.19,10.201 C0.19,10.201 6.833,20.152 17.19,20.152 C27.547,20.152 34.19,10.201 34.19,10.201 C34.19,10.201 27.414,0.249 17.19,0.249 C6.966,0.249 0.19,10.201 0.19,10.201 L0.19,10.201 Z M10.125,10.201 C10.125,6.269 13.288,3.082 17.19,3.082 C21.091,3.082 24.254,6.269 24.254,10.201 C24.254,14.132 21.091,17.32 17.19,17.32 C13.288,17.32 10.125,14.132 10.125,10.201 L10.125,10.201 Z"></path> 
    </clipPath> 
    </defs> 
</svg>

enter image description here

출처

2014-10-17 dapinitial

이에 대한 http://code.google.com/p/chromium/issues/detail?id=425113이 제출되었습니다. –

당신은 클립 경로에 대해 다른 "클립 규칙"속성을 지정해야합니다. clip-path 요소에 clip-rule="evenodd"을 추가하면 문제가 해결됩니다.

출처

2014-10-17 19:09:17

당신은 내 클립 경로 요소를 만졌습니까?! 어떻게 감히! 정말로 그래도 선생님, 최고입니다. 어떻게 내가 너를 상상할 수 있니? – dapinitial

SVG에서 이상한 것을 볼 때마다, 스펙을 다시 읽고 멋진 (복잡한) 그래픽이 얼마나 실현되는지 ... –

사실, 스펙을 읽었지만 * fill-rule * 토끼의 구멍을 아래로 향하십시오. 다시 한 번 고마워! – dapinitial

크롬 경로가 2 개 이상있는 SVG clipPath 38

답변

관련 문제