如何使用SVG clipPathUnits =“ objectBoundingBox”

Question

我正在尝试使用SVG遮罩图像。

<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中，一项资产没有任何显示，而另一项资产则偏离了中心。

我读过其他有关使用的问题clipPathUnits：

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

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

更新资料

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

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

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

Answer 1

我使用 Adob​​e Illustrator 尝试将矢量缩小到 1 像素 x 1 像素，但它未能正确捕获所有坐标。相反，我发现了这个很棒的在线工具，它可以将 SVG 路径坐标转换为相对于“1”单位的 CSS 剪辑路径友好坐标，而无需矢量编辑程序。质量比Illustrator好很多，而且更容易使用。

https://yoksel.github.io/relative-clip-path/

Answer 2

立即遇到此问题并找到解决方案。感谢@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（我曾用过它，而且可以正常工作）。

1. 创建大小为1x1的新文件
2. 打开包含不带clipPath标签的复杂路径的svg 。如果你没有这样的来源，那么你可以简单地创建新的文本文件，粘贴<path .../>到<svg>...</svg>并保存与*.svg推广，然后在您的应用程序（Gravit设计器）打开它。
3. 从打开的svg复制您的复杂路径，并将其粘贴到创建的新文件（1x1）中。
4. 如果启用了“保留长宽比”（或类似功能）功能
5. 设置此参数为您复杂的路径：Width: 1px，Height: 1px，Top: 0px，Left: 0px。
6. 将此1x1文件另存为svg。
7. 在文本编辑器中打开此svg文件，然后复制dattribute 的值。

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

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

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

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

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