html - 如何正确调整 svg clipPath 的大小

Question

我在缩放仅用于 clip-path 的内联 SVG 时遇到问题。被剪裁的元素的宽度为150px，高度为150px。这是我尝试解决此问题的第 2 天，但我感觉就像在原地打转。

在 Chrome(最新版)中，SVG 的正确宽度为 150px。
在 Opera(最新版)中，SVG 的正确宽度为 150px
在 Firefox (54.0.1) 中，SVG 没有正确的宽度。

body {
  background: #333;
}

.image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  clip-path: url(#clipPath);
  height: 150px;
  left: 0;
  position: absolute;
  top: 0;
  width: 150px;
}

#clipPath {
  transform: scale(2.63, 2.63);
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1 1">
  <defs>
    <clipPath id="clipPath" clipPathUnits="objectBoundingBox">
<!--                                                <path d="M28.487,10.847C21.13-6.364,0.18-2.348,0.08,17.628C0,33.538,27.699,46.784,28.531,49.636C29.285,46.675,57,33.785,56.92,17.509C56.823-2.517,35.506-5.678,28.487,10.847z">-->
      <path d="M0.189913333333,0.0723133333333C0.140866666667-0.0424266666667,0.0012-0.0156533333333,0.000533333333333,0.11752C0,0.223586666667,0.18466,0.311893333333,0.190206666667,0.330906666667C0.195233333333,0.311166666667,0.38,0.225233333333,0.379466666667,0.116726666667C0.37882-0.01678,0.236706666667-0.0378533333333,0.189913333333,0.0723133333333z">
      </clipPath>
  </defs>
</svg>
<div class="image" style="background-image: url('https://images.unsplash.com/photo-1468793195345-d9d67818016d?dpr=1&auto=format&fit=crop&w=1500&h=994&q=80&cs=tinysrgb&crop=');"></div>

Answer 1

应用 transform 使用属性，而不是通过 CSS 在 Firefox 中修复此问题。

body {
  background: #333;
}

.image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  clip-path: url(#clipPath);
  height: 150px;
  left: 0;
  position: absolute;
  top: 0;
  width: 150px;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1 1">
  <defs>
    <clipPath id="clipPath" clipPathUnits="objectBoundingBox" transform="scale(2.63, 2.63)">
      <path d="M0.189913333333,0.0723133333333C0.140866666667-0.0424266666667,0.0012-0.0156533333333,0.000533333333333,0.11752C0,0.223586666667,0.18466,0.311893333333,0.190206666667,0.330906666667C0.195233333333,0.311166666667,0.38,0.225233333333,0.379466666667,0.116726666667C0.37882-0.01678,0.236706666667-0.0378533333333,0.189913333333,0.0723133333333z">
      </path>  
    </clipPath>
  </defs>
</svg>
<div class="image" style="background-image: url('https://images.unsplash.com/photo-1468793195345-d9d67818016d?dpr=1&auto=format&fit=crop&w=1500&h=994&q=80&cs=tinysrgb&crop=');"></div>