css 使用 SVG 剪辑路径或蒙版时旋转引入轮廓

Question

有没有办法在 firefox 中停止这个大纲？

#blob { background: red; width: 500px; height: 500px; clip-path: url(#myClip); transform: rotate(20deg);}

<div id="blob"></div>
<svg>
    <defs>
        <path d="M320.403196,424.677624 C426.787532,365.585154 447.310044,306.188587 433.45394,197.28033 C419.597836,88.3720737 316.997962,53.8862578 227.347416,40.9086547 C144.650118,28.9375873 104.472702,88.6407456 69.862267,131.812053 C15.52584,199.588564 48.3439099,300.905451 80.8563197,361.757908 C110.80391,417.809872 214.018859,483.770094 320.403196,424.677624 Z" id="path-1"></path>
       
        <clipPath id="myClip"><use href="#path-1"></use></clipPath>

  
    </defs>
</svg>

这在其他浏览器中正确呈现，只需要解决这个 firefox 错误使用 clip-path 或 mask

出现相同的轮廓

Answer 1

作为解决方法，您可以改为旋转 clipPath：

#blob {
  background: red;
  width: 500px;
  height: 500px;
  clip-path: url(#myClip);
}

<div id="blob"></div>
<svg viewBox="0 0 397 409">
    <defs>
        <path d="M320.403196,424.677624 C426.787532,365.585154 447.310044,306.188587 433.45394,197.28033 C419.597836,88.3720737 316.997962,53.8862578 227.347416,40.9086547 C144.650118,28.9375873 104.472702,88.6407456 69.862267,131.812053 C15.52584,199.588564 48.3439099,300.905451 80.8563197,361.757908 C110.80391,417.809872 214.018859,483.770094 320.403196,424.677624 Z" id="path-1" />
        <clipPath id="myClip" transform="rotate(20)" transform-origin="center">
          <use href="#path-1"></use>
        </clipPath>
    </defs>
</svg>

css 使用 SVG 剪辑路径或蒙版时旋转引入轮廓

css rotate introduces outline when using SVG clip-path or mask

svg

rotation

mask

clip