크롬의 SVG 블렌딩 모드 버그

최근에 저는 SVG를 사용해야하는 프로젝트와 블렌드 모드 필터를 다루고 있습니다. 기본 요소는 배경 이미지이며 일부 모양 (주로 단색으로 채워진 경로)이 있습니다. 문제는 크롬이 렌더링과 관련하여 약간의 어려움이있는 것 같습니다. 배경 이미지가 너무 밝고 혼합 경로 주변에 이상한 과부 장 사각형이 나타납니다. Firefox와 Opera는 같은 시간에 잘 작동합니다.크롬의 SVG 블렌딩 모드 버그

<svg version="1.1" id="layer-0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="1097" height="835" viewBox="0 0 1097 835"> 
<defs> 
    <filter id="img"> 
     <feImage xlink:href="static/img/bg.jpg" x="0" y="0" width="100%" height="100%" /> 
    </filter> 

    <filter id="filter"> 
     <feImage result="img1" xlink:href="static/img/bg.jpg" x="0" y="0" width="100%" height="100%" /> 
     <feBlend mode="multiply" in="SourceGraphic" in2="img1" result="multi" /> 
    </filter> 
</defs> 

<image xlink:href="static/img/bg.jpg" width="100%" height="100%" /> 

<g style="filter:url(#img)" height="100%" width="100%" id="fix"></g> 

<circle filter="url(#filter)" class="shape" cx="560" cy="380" r="120" />

나는 배경에서 사용하기 때문에 별도의 이미지 태그를 추가했다 : 코드의 Live example

에서 가장 중요한 부분 : 버그를 표시하는 별도의 설정 예를 들어 거기

#filter가 잘립니다 (하지만 왜?). 은 Chrome 용 수정 프로그램이지만 만족스러운 해결책은 아닙니다.

버그의 원인을 아는 사람이 있습니까? 어쩌면 내가 잘못하고있는거야? 나는이 문제를 해결하기 위해 수십 시간을 보냈지만 여전히 효과가 없었다.

출처

2012-11-01 RamboBambo

음, 정말 이상합니다. 사파리도 잘 작동합니다. 나는 이것을 아마도 버그라고 생각한다. http://code.google.com/p/chromium/issues/detail?id=131825&q=svg%20filter%20blend&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20OS%20Area%20Feature%20Status%20Owner%20Summary – Duopixel

다른 메모 : Chrome Canary에서 하드웨어 가속 SVG 필터를 사용하도록 설정하면 버그가 사라집니다. – Duopixel

네, 맞습니다. 새로운 Chrome 출시로이 버그가 수정되기를 바랍니다. – RamboBambo

나는 비슷한 문제가있어서 html 헤더에서 기본 요소를 제거하여 문제를 해결했습니다. 크롬에 버그가 있다고 생각합니다.

출처

2013-12-03 13:06:34 jlguenego

답변

관련 문제