Question

嗨，我一直坚持这个问题一段时间了。

基本上我正在尝试关注this MDN article和this example，它解释了如何使用 mask CSS属性和使用Firefox嵌入的SVG图像来屏蔽元素。

<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/看到我的尝试。如您所见，它只显示一个空白图像。

Answer 1

这里

   <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>

将SVG蒙版应用于图像

1 个答案: