html - 如何使用SVG clipPathUnits ="objectBoundingBox"

我正在尝试使用SVG mask 图像。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width=500 height=300>
    <defs>
    <clipPath id="clip">
    <path d="M2.16,1.363h23.699c13.739,0,24.899,10.74,24.899,23.999s-11.16...

<img width="500" style="clip-path: url(#clip);-webkit-clip-path: url(#clip);" />

它可以工作，但我希望clipPath的大小与媒体匹配。在Chrome中，我可以使用CSS控制clipPath的大小，但在FF中，clipPath很小。在Safari中，一项 Assets 没有任何显示，而另一项 Assets 则偏离了中心。

我已经阅读了其他有关使用clipPathUnits的问题:

 <clipPath id="clip" clipPathUnits="objectBoundingBox">

但是我根本无法使它正常工作。显然，它希望路径单位为小数……但是我的形状太复杂了，无法手工编写，而且我不知道任何支持该格式的设计软件。

更新

根据罗伯特的评论，我尝试将CSS转换添加到clipPath来“转换”单元...

    #clip {
        -webkit-transform:scale(0.004195862879,0.005554321262);
        transform:scale(0.004195862879,0.005554321262);
    }

这使得objectBoundingBox可以在Chrome中按预期工作。但是使用Safari或FF仍然没有运气。似乎Safari仍会在要裁剪的元素外部渲染clipPath……使其不可见。 FF开发人员工具使其不清楚放置clipPath的位置。

最佳答案

立即遇到此问题并找到了解决方案。感谢@RobertLongson提到在应用clipPathUnits="objectBoundingBox"时，应确保所有坐标都在0到1之间。这意味着，例如，如果有一个圆圈

<svg viewBox="0 0 20 20">
    <defs>
        <clipPath id="clip">
            <circle cx="10" cy="10" r="10" />
        </clipPath>
    </defs>
</svg>

然后使用clipPathUnits="objectBoundingBox"应该看起来像这样:

<svg>
    <defs>
        <clipPath id="clip" clipPathUnits="objectBoundingBox">
            <circle cx="0.5" cy="0.5" r="0.5" />
        </clipPath>
    </defs>
</svg>

对于复杂的路径，我找到了一种解决方案。您只需要一个用于矢量图像编辑的应用程序即可。对于Linux，它可以是Gravit Designer(我曾用过它，而且可以正常工作)。

创建大小为1x1的新文件

打开svg，其中包含没有clipPath标记的复杂路径。如果没有这样的源，则可以简单地创建新的文本文件，将<path .../>粘贴到<svg>...</svg>中，并以*.svg扩展名保存，然后在应用程序中将其打开(Gravit Designer)。

从打开的svg复制您的复杂路径，并将其粘贴到创建的新文件(1x1)中。

如果启用了

，则关闭“保留纵横比”(或类似功能)功能

为您的复杂路径设置此参数:Width: 1px，Height: 1px，Top: 0px，Left: 0px。

将此1x1文件另存为svg。

在文本编辑器中打开此svg文件，然后复制d属性的值。

现在您有了相对坐标中的复杂路径。将其放入剪辑

...
<clipPath id="clip" clipPathUnits="objectBoundingBox">
    <path d="/* your copied value */" />
</clipPath>
...

完毕!现在，您可以享受响应式剪辑路径，而无需任何其他转换或其他变通方法。

我知道，它看起来太复杂了，但实际上会在大约2分钟内完成(如果您安装了矢量图像编辑软件)。

希望这对有人在1.5年前提出了疑问的人有所帮助:)