剪辑路径 SVG 在 Firefox 中不缩放 - 在其他浏览器中工作答案

【问题标题】：Clip path SVG not scaling in Firefox - working in other browsers剪辑路径 SVG 在 Firefox 中不缩放 - 在其他浏览器中工作
【发布时间】：2019-11-18 17:08:02
【问题描述】：

我正在尝试让我的徽标在所有浏览器中都能正常工作，但无法在 Firefox 中正常工作。

我正在使用 transform:scale() 属性来扩展 SVG。我已经尝试了从添加视图框和许多其他 svg 属性的所有方法。我什至只是直接从 Illustrator 导出了一个 svg 并托管它，但都没有成功。

重新缩放 SVG 的代码如下所示：

var resize = function () {
  var svgPath = document.getElementById('SVGID_1_');
  var scale = ((Math.min(2048,window.innerWidth) / 425)).toFixed(2);
  var scaleStyle = 'scale(' + scale + ')';
  svgPath.style.transform = scaleStyle;
  svgPath.style.webkitTransform = scaleStyle;
}

它在任何地方都可以正常缩放（即使在 iOS 浏览器上），但在 Firefox 中却不行。

我的代码可以在以下位置找到：https://codepen.io/unrealnl/pen/agPpgy

【问题讨论】：

没有你的代码很难说但是我怀疑你没有在css中使用transform-origin。根据transform-origin 的值，您可能需要使用transform-box: fill-box
嘿！忘记添加我的代码的链接，你可以在这里找到它：terminarchgames.com
请在您的问题中添加minimal reproducible example。您不应链接到实时网站，因为当您修复该网站时，此问题将不再对未来的读者有用。
@RobertLongson 感谢您提供的信息。
@PaulLeBeau 这里是给未来读者的链接：codepen.io/unrealnl/pen/agPpgy，干杯。

标签： css firefox svg clip-path

【解决方案1】：

最好的选择是利用objectBoundingBox 值，将clipPathUnits 属性应用于<clipPath /> 元素。这个解决方案根本不需要js。

应该是这样的：

<svg class="svg">
  <defs>
    <clipPath id="clip" clipPathUnits="objectBoundingBox">
      <path d="..."></path>
    </clipPath>
  </defs>
</svg>

然后像 here 一样应用掩码，类似于：

.elem {
  clip-path: url(#clip);
}

Here 是完整的工作示例，here 是可以使用的代码细节。

重要建议

您必须重新导出您的 svg 才能与 clipPathUnits 道具兼容。

引用 this useful article 的 Sara Soueidan 的话

这里需要注意的重要一点是，当您使用objectBoundingBox 值时，为<clipPath> 的内容指定的坐标必须在[0, 1] 范围内——坐标系变为单位系统， clipPath 内的形状坐标必须是该范围内的分数。

为了重现demo，我使用Adobe Illustrator（但可以是任何矢量编辑器程序）重新打开您的svg，并将path 缩放/放置到1x1 像素的画布中，然后重新导出并瞧瞧！

【讨论】：

非常感谢您的详细回答。正如罗伯特上面提到的，即使这个“问题”在下一个晚上修复，这将是一个直接的修复。然而，我现在确实注意到 Chrome 中的一个扩展问题（我一定喜欢 Web 开发），但我自己会解决这个问题。最佳
酷。罗伯特的评论在哪里？但是请记住，当您可以仅使用 css 解决相同的问题时，您会在 resize 事件上触发规模 function，这可能会影响性能。
奇怪，我认为他出于某种原因删除了他的消息。我还没有检查每晚的构建，也许它不在修复中，他决定删除他的消息。顺便说一句，你知道为什么它在 Chrome 中不能正确缩放吗？
@ErikSombroek 虽然在最新的 Firefox 版本中有一个错误修复会改变缩放，但我不确定它对这个特定问题有影响，我不确定 Chrome 或 Firefox 渲染是否正确原始问题中的 userSpaceInUse 问题。
我已经看过 Sara Soueidan 的文章，但您的故障回复：“1x1 像素画布”解决了我的问题。谢谢！！希望我能在拔头发 2 小时之前早点看到这个。