如何使用 SVG clipPathUnits="objectBoundingBox"答案

【问题标题】：How to use SVG clipPathUnits="objectBoundingBox"如何使用 SVG clipPathUnits="objectBoundingBox"
【发布时间】：2017-10-20 18:31:00
【问题描述】：

我正在尝试使用 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">

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

更新

按照 Robert 的 cmets，我尝试向 clipPath 添加 CSS 变换以“翻译”单位...

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

这允许objectBoundingBox 在 Chrome 中按预期工作。但是Safari或FF仍然没有运气。看来 Safari 仍将 clipPath 呈现在要剪辑的元素之外......使其不可见。 FF 开发者工具使得它在哪里放置 clipPath 变得不太清楚。

【问题讨论】：

objectBoundingBox 单位介于 0 和 1 之间。
@RobertLongson 我认为问题中已经说明了这一点，不是吗？
你给我们的是一个不完整的例子，所以我们无法解决这个问题，我们剩下的就是将概括性作为答案，你不希望这样，那你怎么办想要答案吗？
@RobertLongson 你能澄清我的问题中遗漏了什么吗？我从我的项目中复制/粘贴了它。我只是省略了 path 元素的 d 属性以节省空间。看起来我也错过了 img 的 href ......你还想让我包括什么？也欢迎笼统......我只是因为你重复了这个问题而感到困惑。
缺少minimal reproducible example。请创建一个我们可以更正的缩短的有效路径。

标签： html css svg clip-path

【解决方案1】：

现在遇到这个问题并找到了解决方案。感谢@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 年前有人提出了问题 :)

【讨论】：

谢谢！不敢相信你在几个小时前发布了这个答案！此外，我在 Sketch 和 Illustrator (macOS) 中导出文件（非常复杂的路径）时遇到了问题，但 Figma（基于浏览器的设计应用程序）完成了这项工作！
@rista404 Glag 知道我的回答对你有帮助 :)
两年后添加一些内容：单位必须在字面上介于 0 和 1 之间，而不是“50%”！
Figma 在 1x1 的尺寸上为我做得最好。
1px - 1px 这是最好的答案！谢谢你让我开心

【解决方案2】：

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

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

【讨论】：

完美工作?

【解决方案3】：

我遇到了类似的问题，我是这样解决的：

我将 svg 文件传输到 figma（拖放）
我对齐到 100 x 100 的正方形（不保留边）
将文件导出为 svg
我把文件上传到服务https://betravis.github.io/shape-tools/path-to-polygon/（不是广告，你可以用别的）
我得到一个干净的多边形百分比，它可以用于剪辑路径；

示例：

.elem-to-path{
clip-path: polygon(89.758% 99.457%, 67.178% 99.862%, 39.660% 99.621%, 7.748% 98.475%, 5.924% 98.004%, 5.742% 97.859%, 4.348% 92.036%, 1.807% 80.831%, 0.174% 36.869%, 1.052% 1.541%, 1.301% 1.012%, 2.237% 0.790%, 62.832% 0.559%, 78.860% 0.810%, 88.832% 0.810%, 96.913% 1.195%, 98.441% 3.283%, 99.616% 24.932%, 98.813% 86.202%, 96.703% 95.116%, 89.758% 99.457%)}

【讨论】：