4

我需要用 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>在包装 group 的 SVG 内添加一个标签<g>，但没有成功。

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

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

4

1 回答 1

4

如果将图像放在 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 都支持。

于 2012-06-06T18:03:35.717 回答