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是完整的示例，here是要使用的代码详细信息。

重要建议

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

引用this useful article中的Sara Soueidan

此处要注意的一件事是，当您使用objectBoundingBox值时，为<clipPath>的内容指定的坐标必须在[0，1]范围内-坐标系变为单位制，clipPath内的形状的坐标必须是该范围内的分数。

因此，要重现demo，请使用 Adobe Illustrator （但可以是任何矢量编辑器程序）重新打开svg，并缩放/放置path放入1x1像素的画布中，然后重新导出并贴图！

剪切路径SVG在Firefox中无法缩放-在其他浏览器中工作

1 个答案:

重要建议