이미지에 SVG 마스크 적용

안녕하세요. 지금 당분간이 문제에 봉착했습니다. 이미지에 SVG 마스크 적용

는 기본적으로 나는 따라하려고 this MDN article과 마스크 CSS 속성과 파이어 폭스에 내장 된 SVG 이미지를 사용하여 요소를 마스크하는 방법을 설명합니다 this example.

<style>.target { mask: url(#m1); }</style> 

<img src="http://upload.wikimedia.org/wikipedia/en/thumb/0/08/DioHolyDiver.jpg/220px-DioHolyDiver.jpg" alt="" class="target" /> 

<svg width="220" height="220"> 
<mask maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox" id="m1"> 
<linearGradient y2="0.5" x2="0.6" y1="0.5" x1="0" id="g"> 
    <stop stop-color="white" offset="0"/> 
    <stop stop-opacity="0" stop-color="white" offset="1"/> 
</linearGradient> 
<rect id="svg_1" height="220" width="220" y="0" x="0" stroke-width="0" fill="url(#g)"/> 
</mask> 
</svg>

내 시도는 여기 http://jsfiddle.net/pjgalbraith/cnLHE/입니다. 보시다시피 빈 이미지 만 표시됩니다.

출처

2012-02-28 P. Galbraith

여기

<rect id="svg_1" height="220" width="220" y="0" x="0" stroke-width="0" fill="url(#g)"/>

x 및 y는 0보다 크고 1 미만이어야 높이와 폭 말이 이하

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> 
<body> 

    <img src="http://upload.wikimedia.org/wikipedia/en/thumb/0/08/DioHolyDiver.jpg/220px-DioHolyDiver.jpg" alt="" class="target" /> 


    <style>.target { mask: url(#m1); } </style> 

    <svg:svg width="220" height="220"> 
    <svg:mask maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox" id="m1"> 
     <svg:linearGradient id="g" gradientUnits="objectBoundingBox" y2="0.5" x2="0.6" y1="0.5" x1="0"> 
     <svg:stop stop-color="white" offset="0"/> 
     <svg:stop stop-color="white" stop-opacity="0" offset="1"/> 
     </svg:linearGradient> 
     <svg:rect id="svg_1" x="0.5" y="0.2" width="0.5" height="0.8" stroke-width="0" fill="url(#g)"/> 
    </svg:mask> 
    </svg:svg> 

</body> 
</html>

출처

2012-02-28 13:47:01 gidzior

감사되어야하기 때문에 더 경사가 없다. 그러나 그것은 여전히 나를 위해 비어있는 것처럼 보입니다. http://jsfiddle.net/pjgalbraith/cnLHE/13/ –

귀하의 메일을 보내주십시오. u 작업 파일을 보내 드리겠습니다. – gidzior

github (http://gist.github.com/)에서 요지를 작성할 수 있습니까? 나는 작업 파일을보고 싶다. 또한 그것이 공개되면 다른 사람들이 유익 할 수 있습니다. 이 사이트에서 오후를 보낼 수 없으며 여기에 이메일을 게시하지 않을 것입니다. –

이미지에 SVG 마스크 적용

답변

관련 문제