Question

我的目标是使用html5中的svg蒙版剪切出一张照片的矩形区域。我试图使用下面的代码和fiddle来实现这一点，但无济于事。谁能告诉我我做错了什么？

HTML：

<body>
<svg id="svg-rect" width="50px" height="50px">

    <defs>

    <mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <rect width="100%" height="100%"  />
    </mask>
  </defs>
</svg>

<!--<svg id="svg-rect" width="50px" height="50px">
  <rect  width="100%" height="100%"  />
</svg>-->

<img src="https://scontent-a.xx.fbcdn.net/hphotos-prn1/t1.0-9/p235x165/75938_10152243783285987_398136218_n.jpg"/>
</body>

的CSS：

img {
  mask: url(#masking);
  position:absolute;
    top:0px;
    left:0px;
}

#svg-rect{
    position:absolute;
    top:50px;
    left:60px;
    z-index:2;
}

Answer 1

将SVG效果应用于HTML仅适用于Firefox。您必须在Chrome / Safari中使用-webkit-mask，并且已弃用。接下来，您必须使用颜色填充矩形才能使蒙版生效。并且firefox中存在一个错误，你需要在十进制形式的掩码中指定矩形的x / y偏移量，％＆＃39; s不起作用。将矩形定义更改为：

  <rect x=".2" y=".2" width=".25" height=".25" fill="white"  />

您将看到蒙版效果（仅限Firefox）

或...反转遮罩，使用空填充和实体笔划

  <rect x="0" y="0" width="1" height="1" stroke="white" stroke-width=".4"  />

但是，为实现最大兼容性，最好的方法是使用内联SVG，并使用SVG图像标记在SVG中执行图像内容。

Answer 2

阐述Michaels＆＃39;最后一点，这里是如何以纯SVG方式完成的。

<svg width="235" height="314" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <mask id="masking">
            <rect width="100%" height="100%" fill="white" />
            <rect x="60px" y="50px" width="50px" height="50px" fill="black" />
        </mask>
    </defs>

    <image width="235" height="314"
           mask="url(#masking)"
           xlink:href="https://scontent-a.xx.fbcdn.net/hphotos-prn1/t1.0-9/p235x165/75938_10152243783285987_398136218_n.jpg" />
</svg>

Fiddle here

使用html5中的svg掩码剪切出照片的矩形区域

2 个答案: