Support `mask-type:alpha`

[hashirshoaeb]

Desired Output: In mac preview and google chrome it is visible like this.

package output:

svg file:

<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="paint0_linear_2747_23934" x1="8.125" y1="5" x2="36.25" y2="26.25" gradientUnits="userSpaceOnUse">
<stop stop-color="#EEBF6D" stop-opacity="0.64"/>
<stop offset="1" stop-color="#EBB04A" stop-opacity="0.8"/>
</linearGradient>
</defs>
<circle cx="20" cy="20" r="20" fill="url(#paint0_linear_2747_23934)"/>
<mask id="mask0_2747_23934" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="12" y="12" width="20" height="16">
<path d="M30.3275 22.9176C30.3275 25.2189 28.4621 27.0843 26.1608 27.0843C25.415 27.0843 24.7141 26.8885 24.1083 26.5447C23.4667 26.1811 22.933 25.6538 22.5616 25.0166C22.1902 24.3794 21.9944 23.6552 21.9941 22.9176C21.9941 21.8476 22.3975 20.8718 23.06 20.1343C23.4503 19.6985 23.9283 19.3499 24.4627 19.1116C24.997 18.8732 25.5757 18.7503 26.1608 18.751C28.4621 18.751 30.3275 20.6164 30.3275 22.9176Z" fill="white" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M26.1641 15.001V18.751C25.579 18.7503 25.0003 18.8732 24.4659 19.1116C23.9316 19.3499 23.4536 19.6985 23.0632 20.1343C22.3757 20.8982 21.9959 21.8899 21.9974 22.9176C21.9976 23.6552 22.1934 24.3794 22.5648 25.0166C22.9362 25.6538 23.4699 26.1811 24.1116 26.5447C23.0024 26.8801 21.5299 27.0843 19.9141 27.0843C16.4624 27.0843 13.6641 26.1514 13.6641 25.001V15.001" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M26.1641 15.0003C26.1641 16.1507 23.3657 17.0837 19.9141 17.0837C16.4624 17.0837 13.6641 16.1507 13.6641 15.0003C13.6641 13.8499 16.4624 12.917 19.9141 12.917C23.3657 12.917 26.1641 13.8499 26.1641 15.0003Z" fill="white" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.6641 21.6668C13.6641 22.8172 16.4624 23.7502 19.9141 23.7502C20.667 23.7502 21.3891 23.706 22.0574 23.6243M13.6641 18.3335C13.6641 19.4839 16.4624 20.4168 19.9141 20.4168C21.0624 20.4168 22.1386 20.3135 23.0632 20.1335" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M27.8307 22.9176H26.1641V21.251" stroke="black" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
</mask>
<g mask="url(#mask0_2747_23934)">
<path d="M12 10H32V30H12V10Z" fill="white"/>
</g>

</svg>

[dnfield]

This is a bug in the mask optimizer.

[dnfield]

Hm. Maybe it is not a bug in the masking optimizer, but it is a bug in mask handling...

[dnfield]

Yeah, the mask-type is not being processed correctly in this library.

[dnfield]

This needs a bit of thinking about how to properly apply masks that I'm not going to have time for soon. I'm open to a PR to fix this, but you can also temporarily work around it by removing the last path in your mask (which doesn't contribute to drawing in this case).

[dnfield]

<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="paint0_linear_2747_23934" x1="8.125" y1="5" x2="36.25" y2="26.25" gradientUnits="userSpaceOnUse">
<stop stop-color="#EEBF6D" stop-opacity="0.64"/>
<stop offset="1" stop-color="#EBB04A" stop-opacity="0.8"/>
</linearGradient>
</defs>
<circle cx="20" cy="20" r="20" fill="url(#paint0_linear_2747_23934)"/>
<mask id="mask0_2747_23934" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="12" y="12" width="20" height="16">
<path d="M30.3275 22.9176C30.3275 25.2189 28.4621 27.0843 26.1608 27.0843C25.415 27.0843 24.7141 26.8885 24.1083 26.5447C23.4667 26.1811 22.933 25.6538 22.5616 25.0166C22.1902 24.3794 21.9944 23.6552 21.9941 22.9176C21.9941 21.8476 22.3975 20.8718 23.06 20.1343C23.4503 19.6985 23.9283 19.3499 24.4627 19.1116C24.997 18.8732 25.5757 18.7503 26.1608 18.751C28.4621 18.751 30.3275 20.6164 30.3275 22.9176Z" fill="white" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M26.1641 15.001V18.751C25.579 18.7503 25.0003 18.8732 24.4659 19.1116C23.9316 19.3499 23.4536 19.6985 23.0632 20.1343C22.3757 20.8982 21.9959 21.8899 21.9974 22.9176C21.9976 23.6552 22.1934 24.3794 22.5648 25.0166C22.9362 25.6538 23.4699 26.1811 24.1116 26.5447C23.0024 26.8801 21.5299 27.0843 19.9141 27.0843C16.4624 27.0843 13.6641 26.1514 13.6641 25.001V15.001" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M26.1641 15.0003C26.1641 16.1507 23.3657 17.0837 19.9141 17.0837C16.4624 17.0837 13.6641 16.1507 13.6641 15.0003C13.6641 13.8499 16.4624 12.917 19.9141 12.917C23.3657 12.917 26.1641 13.8499 26.1641 15.0003Z" fill="white" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.6641 21.6668C13.6641 22.8172 16.4624 23.7502 19.9141 23.7502C20.667 23.7502 21.3891 23.706 22.0574 23.6243M13.6641 18.3335C13.6641 19.4839 16.4624 20.4168 19.9141 20.4168C21.0624 20.4168 22.1386 20.3135 23.0632 20.1335" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
</mask>
<g mask="url(#mask0_2747_23934)">
<path d="M12 10H32V30H12V10Z" fill="white"/>
</g>

</svg>