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

Is there a way to stop this outline in 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>

This renders correctly in other browsers, just need some work around for this firefox bug same outline appears using either clip-path or mask

CodePudding user response：

As a workaround you could rotate the clipPath instead:

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