svg掩码和边界框

时间:2015-09-19 06:24:06

标签: svg mask bounding-box

我需要将遮罩应用于不同的物体 面罩应覆盖整个物体(可见部分)。我将面具放在页面顶部的一个特定位置,将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>

所以主要的问题是:有没有办法实现这个目标?掩码将被许多具有不同大小和内容的元素使用,我不想克隆它。

如果没有在每个元素中克隆掩码,有没有办法做到这一点? 有没有办法将边界框缩小到可见区域?
有没有办法在不扩展父级边界框的情况下显示图像的一部分?
还有其他办法吗?

1 个答案:

答案 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元素,你可以定义要使用的用户空间,并使用掩码应用的部分...