Question

我在扩展内联SVG时遇到问题，该SVG仅用于clip-path。被剪裁的元素的宽度为150px，高度为150px 。这是我试图解决这个问题的第二天，但我觉得我喜欢在圈子里跑。

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

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 1

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

如何正确获取svg clipPath大小

1 个答案: