Question

我需要使用SVG元素屏蔽图像。我的页面上有一个非常详细的内联SVG元素，我想用它作为将要加载的图像的掩码。我的SVG是用<path>绘制的。我想类似于这个例子http://jsfiddle.net/pjgalbraith/cnLHE/。 *我注意到这个例子对我来说不适用于Chrome或IE9，只有FF。

这是我的基本结构。

  <div>
     <svg width="500" height="500">
        <mask id="myMask'>
           <g>
              <path/>
           </g>
        </mask>
     </svg>
     <img src="http://myImage.jpg" style="mask:url(#myMask);">
  </div>

我已经尝试在包含组<mask>的SVG中添加<g>标记，但这不起作用。

这使得我的SVG图形完全透明，所以我认为它正在尝试工作，并且SVG充当掩模，但图像根本没有被掩盖，只是覆盖了位置。 <img>是否需要在<svg>之内或类似内容？

有没有人拥有SVG经验并且知道如何做到这一点？我看到的每个例子都使用简单的rect或svg图形来屏蔽，但没有路径。也许这就是为什么？感谢

Answer 1

如果你把图像放在svg中，你可以让它在任何地方都可以工作，如下所示：

<svg width="220" height="220">
    <mask maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox" id="m1">
      <linearGradient id="g" gradientUnits="objectBoundingBox" y2="0.5" x2="1" y1="0.5" x1="0">
        <stop stop-color="white" offset="0"/>
        <stop stop-color="white" stop-opacity="0" offset="1"/>
      </linearGradient>
      <rect id="svg_1" height="1" width="1" y="0" x="0" stroke-width="0" fill="url(#g)"/>
    </mask>
<image xlink:href="http://upload.wikimedia.org/wikipedia/en/thumb/0/08/DioHolyDiver.jpg/220px-DioHolyDiver.jpg" width="100%" height="100%" class="target"/>
</svg>

这是更新的小提琴，显示：http://jsfiddle.net/cnLHE/34/

要回答关于在掩码中使用路径的问题，这很好，并且得到所有支持svg的浏览器AFAIK的支持。

是否可以使用带路径绘制的内联svg屏蔽图像？

1 个答案: