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

Question

我试图让我的 Logo 在所有浏览器中正常工作，但我无法在 Firefox 中正常工作。

我正在使用 transform:scale() 属性来扩展 SVG。 我已经尝试了从添加 View 框和许多其他 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

Answer 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 兼容 Prop 。

引用 Sara Soueidan 来自 this useful article

One important thing to note here is that when you use the objectBoundingBox value, the coordinates specified for the contents of the <clipPath> must be in the range [0, 1]—the coordinate system becomes a unit system, and the coordinates of the shapes inside a clipPath have to be fractions in that range.

所以要重现 demo我重新打开你的svg使用 Adobe Illustrator(但可以是任何矢量编辑器程序)并缩放/放置 path放入 1x1 像素的 Canvas 中，然后重新导出，瞧瞧!