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

Question

我试图让我的徽标在所有浏览器中正常工作，但我无法在 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

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 is the full working example and here 代码详情。

重要建议

您必须 re-export 您的 svg 才能与 clipPathUnits 道具兼容。

引用来自 this useful article

的 Sara Soueidan

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，我使用 Adobe Illustrator（但可以是任何矢量编辑器程序）和 [=47= 重新打开您的 svg ] 将 path 转换为 1x1 像素的 canvas，然后 re-exported 瞧！

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

Clip path SVG not scaling in Firefox - working in other browsers

css

firefox

svg

clip-path

重要建议