svg 蒙版和边界框答案

【问题标题】：svg mask and bounding boxsvg 蒙版和边界框
【发布时间】：2015-12-16 08:51:53
【问题描述】：

我需要将蒙版应用于不同的对象。
面具应该覆盖整个物体（它的可见部分）。我将面具放在页面顶部的一个特定位置，将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 的边界框）。

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

有没有办法在每个元素内不克隆掩码？
有什么办法可以将边界框缩小到可见区域？
有什么方法可以在不扩展父边框的情况下显示图像的一部分？
有没有其他方法可以做到这一点？

【问题讨论】：

第二部分和第三部分的答案都是否定的。这使得回答第一种和第四种情况相当困难。

标签： svg mask bounding-box

【解决方案1】：

你想达到这样的目标吗？

<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 元素，您可以定义要使用的用户空间以及应用掩码的部分...

【讨论】：

这是我现在使用的方式。但就我而言，我不知道具有mask 标签的svg 的尺寸。事实上，有几个不同的元素具有相同的掩码。我现在对每个元素使用原始掩码的克隆，我想避免克隆。
userSpaceOnUse 是应用蒙版的元素的坐标系，而不是蒙版的来源。在您的情况下，它将是 zzz 的父 svg 元素。也许您可以发布一个示例，其中 userSpaceOn 使用不起作用？
示例：jsfiddle.net/04nz92d9 掩码无法正确应用于两个元素：zzz1 和 zzz2。使用maskContentUnits="objectBoundingBox" 可以轻松完成，但是通过块内容扩展的边界框存在问题。
mmh，我正在考虑将 userSpaceOnUse 与掩码内的百分比值结合使用。据我了解，百分比应该相对于引用元素的元素的用户坐标系，不幸的是，它没有像这样实现:-(
是的，根据帮助，有人可能会认为，内部掩码使用了来自使用 mask 属性引用掩码的元素的坐标系。不幸的是，要么我的英语太糟糕，我无法正确理解帮助，要么帮助出现了某种错误。使用蒙版定义位置的坐标系蒙版内容。它可以很容易地测试：jsfiddle.net/lazyeugene/wq1gg29j 因此，要将单个掩码应用于许多不同的元素，我需要在这些元素中克隆它，以便掩码将使用元素的坐标系来获取百分比值。