SVG-to-PDFKit icon indicating copy to clipboard operation
SVG-to-PDFKit copied to clipboard

Published 20 hours ago • verified publisher icon alafr

Colors appear transparent/faded

Open killthekitten opened this issue 4 years ago • 2 comments

Can't add much to the title - somehow colors appear transparent on the PDF. What could be the reason?

SVG as browser renders it: Screenshot 2020-06-26 at 21 07 13

SVG-to-PDFKit: 

<svg width="151" height="48" viewBox="0 0 151 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="7" y="8" width="26" height="32">
<path d="M31.5779 8C20.8743 12.6163 11.0281 30.0033 8.48644 37.8007C7.92188 39.533 7.42457 41.429 9.05504 38.405C10.0323 36.5923 12.4507 34.041 17.9655 33.1255C22.3774 32.3932 24.2248 31.4418 27.0541 28.2052C25.7497 28.676 24.0649 29.66 20.4683 28.5321C25.4556 28.9729 28.8924 25.9977 30.2351 21.7646C26.9422 23.2685 24.1555 22.2162 23.4255 21.8293C27.9173 21.9431 31.7058 19.0674 32.6169 14.2778C33.1482 11.4858 32.2972 8.9154 31.5779 8Z" fill="#6160A2"/>
</mask>
<g mask="url(#mask0)">
<path d="M30.659 8.42832C20.3154 13.6061 10.9552 30.227 8.48644 37.8007C7.92188 39.533 7.42457 41.429 9.05504 38.405C10.0323 36.5923 12.4507 34.041 17.9655 33.1255C21.6306 32.5172 23.5259 31.7576 25.6846 29.6623C26.0668 29.2914 26.2687 28.5218 25.764 28.6875C25.179 28.8796 24.5762 28.0699 25.1393 27.82C27.1805 26.9139 28.7262 25.2524 29.6938 23.1628C29.9364 22.6391 29.3861 22.121 28.8302 22.2653C27.8293 22.5252 26.9001 22.5663 26.0966 22.4987C25.3987 22.4399 25.5015 21.5966 26.1819 21.4297C28.2418 20.9245 30.2981 19.8904 31.482 18.5927C32.5833 17.3854 32.2634 16.1358 32.6169 14.2778C33.0252 12.1315 32.6168 10.1161 32.0793 8.88288C31.839 8.33145 31.1946 8.16018 30.659 8.42832Z" fill="#6160A2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M40.2395 14.5486C40.2395 24.9983 31.9355 33.6047 21.5276 33.6047C11.1196 33.6047 2.81552 24.9983 2.81552 14.5486C2.81552 4.09888 11.1196 -4.50742 21.5276 -4.50742C31.9355 -4.50742 40.2395 4.09888 40.2395 14.5486ZM21.5276 28.6046C29.1187 28.6046 35.2724 22.3115 35.2724 14.5486C35.2724 6.78565 29.1187 0.492574 21.5276 0.492574C13.9364 0.492574 7.78263 6.78565 7.78263 14.5486C7.78263 22.3115 13.9364 28.6046 21.5276 28.6046Z" fill="#90DF9B"/>
<path d="M35.2724 14.5485C35.2724 22.3115 29.1187 28.6045 21.5276 28.6045C13.9364 28.6045 7.78262 22.3115 7.78262 14.5485C7.78262 6.78563 13.9364 0.492554 21.5276 0.492554C29.1187 0.492554 35.2724 6.78563 35.2724 14.5485Z" fill="#8E8CEE"/>
</g>
</svg>

I would be happy to contribute a fix if that's something feasible.

Cheers

killthekitten avatar Jun 26 '20 19:06 killthekitten

mask-type="alpha" is not yet supported.

As a workaround, you could adjust the fill color of the path inside the mask, so that it gives the desired result (fill="white" in this case)

alafr avatar Jun 26 '20 19:06 alafr

Great, thanks for getting back so quickly. What would it take to make this work properly?

killthekitten avatar Jun 26 '20 21:06 killthekitten