我需要将遮罩应用于不同的物体
面罩应覆盖整个物体(可见部分)。我将面具放在页面顶部的一个特定位置,将maskContentUnits
更改为objectBoundingBox
,因此效果很好。
然后出现问题。
我做了一个小提琴来说明问题:http://jsfiddle.net/8qdt7vjr/1/
<body>
<svg width="0" height="0">
<defs>
<mask id="mask1" maskContentUnits="objectBoundingBox">
<ellipse cx=".5" cy=".5" rx=".5" ry=".5" fill="white" />
</mask>
</defs>
</svg>
<svg class="svg" width="200" height="150" overflow="visible">
<rect x="-50" y="-50" width="350" height="250" fill="none" stroke="green" stroke-width="2" />
<svg id="zzz" x="0" y="0" width="100%" height="100%" overflow="visible" mask="url(#mask1)">
<rect x="-50" y="-50" width="350" height="250" fill="blue" fill-opacity=".3" />
</svg>
<rect width="100%" height="100%" fill="red" fill-opacity=".1" stroke="red" stroke-width="1" />
</svg>
</body>
在这个小提琴中,我想用id="zzz"
将掩码应用于svg元素。但是在这个元素中有一个rect
元素,它会增加 zzz 的边界框。在小提琴中它是rect
,但在我的项目中它是image
标签。 zzz 已将溢出设置为隐藏(在小提琴中我将其更改为可见,因此更容易看到问题),因此我在 zzz
真正的问题是 zzz 的内容会增加 zzz 的边界框。
在小提琴中,我希望椭圆蒙版位于红色矩形内(可见 zzz 的区域),但它位于绿色矩形( zzz 的边界框)内。 / p>
所以主要的问题是:有没有办法实现这个目标?掩码将被许多具有不同大小和内容的元素使用,我不想克隆它。
如果没有在每个元素中克隆掩码,有没有办法做到这一点?
有没有办法将边界框缩小到可见区域?
有没有办法在不扩展父级边界框的情况下显示图像的一部分?
还有其他办法吗?
答案 0 :(得分:0)
你试图实现这样的目标吗?
<body>
<svg width="0" height="0">
<defs>
<mask id="mask1" maskContentUnits="userSpaceOnUse">
<ellipse cx="100" cy="75" rx="100" ry="75" fill="white" />
</mask>
</defs>
</svg>
<svg class="svg" width="200" height="150" overflow="visible">
<rect x="-50" y="-50" width="350" height="250" fill="none" stroke="green" stroke-width="2" />
<svg id="zzz" x="0" y="0" width="100%" height="100%" overflow="visible" mask="url(#mask1)">
<rect x="-50" y="-50" width="350" height="250" fill="blue" fill-opacity=".3" />
</svg>
<rect width="100%" height="100%" fill="red" fill-opacity=".1" stroke="red" stroke-width="1" />
</svg>
</body>
使用userSpaceOnUse而不是objectBoundingBox可以帮助实现你想要的...结合嵌套的svg元素,你可以定义要使用的用户空间,并使用掩码应用的部分...