Open aquaductape opened 1 month ago
Seems to be some weird interaction between filter and mask. A bit more of a reduced example:
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="filter_0" filterUnits="userSpaceOnUse">
<feGaussianBlur stdDeviation="7" />
</filter>
</defs>
<mask id="0" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80">
<rect width="80" height="80" rx="160" fill="#FFFFFF"></rect>
</mask>
<g mask="url(#0)">
<path
filter="url(#filter_0)"
d="M32.414 59.35L50.376 70.5H72.5v-71H33.728L26.5 13.381l19.057 27.08L32.414 59.35z"
fill="#FF005B"
transform="translate(-2 2) rotate(-282 40 40) scale(1.5)" />
<path
filter="url(#filter_0)"
d="M22.216 24L0 46.75l14.108 38.129L78 86l-3.081-59.276-22.378 4.005 12.972 20.186-23.35 27.395L22.215 24z"
fill="#FF7D10"
transform="translate(-3 -3) rotate(-243 40 40) scale(1.5)" />
</g>
</svg>
Chrome:
resvg:
I guess some transform got ignored. Will take a look.
The input svg file is a circle with gradients. The issue is that on the output png file, on the very right of the circle the gradient is cut off showing a sharp line.
Input svg file.
Output png file.
Input svg code.