Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unsupported mask-type style attribute in SVG #2566

Closed
4 tasks done
acolombier opened this issue Sep 4, 2024 · 1 comment
Closed
4 tasks done

Unsupported mask-type style attribute in SVG #2566

acolombier opened this issue Sep 4, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@acolombier
Copy link

acolombier commented Sep 4, 2024

Is your issue REALLY a bug?

  • My issue is indeed a bug!
  • I am not crazy! I will not fill out this form just to ask a question or request a feature. Pinky promise.

Is there an existing issue for this?

  • I have searched the existing issues.

Is this issue related to iced?

  • My hardware is compatible and my graphics drivers are up-to-date.

What happened?

Until 0.13, iced doesn't seems to support mask-type: alpha SVG style attribute.

svg example on 0.12.3 (latest crate release) with an SVG using mask-type: alpha

image

svg example on 0.13-dev (master) with an SVG using mask-type: alpha

image

Note that they are rendering issues currently, as it can be seen on the grey border. Should I open a new issue for that

The SVG used for testing
<svg width="394" height="116" viewBox="0 0 394 116" fill="none" 
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <mask id="mask0_12846_20756" style="mask-type: alpha;" maskUnits="userSpaceOnUse" x="4" y="3"
            width="186" height="94">
            <rect x="4.00024" y="3" width="185" height="94" fill="#303030" />
        </mask>
        <mask id="mask1_12846_20756" style="mask-type: alpha;" maskUnits="userSpaceOnUse" x="205" y="3"
            width="185" height="94">
            <rect x="205" y="3" width="185" height="94" fill="#303030" />
        </mask>
        <mask id="mask2_12846_20756" style="mask-type: alpha;" maskUnits="userSpaceOnUse" x="3" y="3"
            width="186" height="94">
            <rect x="3.99976" y="3" width="185" height="94" fill="#303030" />
        </mask>
        <mask id="mask3_12846_20756" style="mask-type: alpha;" maskUnits="userSpaceOnUse" x="204" y="3"
            width="186" height="94">
            <rect x="205" y="3" width="185" height="94" fill="#303030" />
        </mask>
    </defs>
    <path opacity="0.3"
        d="M39.8806 116C39.8806 112.686 42.5669 110 45.8806 110H146.881C150.194 110 152.881 112.686 152.881 116H39.8806Z"
        fill="#BEBEBE" />
    <path opacity="0.3" d="M78.8806 101H113.881V109H78.8806V101Z" fill="#BEBEBE" />
    <rect x="2.38062" y="1.5" width="188.119" height="96.9702" rx="2.5" fill="#2E2E2E"
        stroke="#9E9E9E" stroke-width="3" />
    <g mask="url(#mask0_12846_20756)">
        <path opacity="0.4"
            d="M12.8806 16.572C12.8806 14.3629 14.6715 12.572 16.8806 12.572H191.881V85.572H16.8806C14.6715 85.572 12.8806 83.7812 12.8806 81.572V16.572Z"
            fill="#63D0DF" />
        <path opacity="0.4"
            d="M12.8806 93.572C12.8806 91.3629 14.6715 89.572 16.8806 89.572H191.881V162.572H16.8806C14.6715 162.572 12.8806 160.781 12.8806 158.572V93.572Z"
            fill="#63D0DF" />
    </g>
    <path opacity="0.3"
        d="M240.881 116C240.881 112.686 243.567 110 246.881 110H347.881C351.195 110 353.881 112.686 353.881 116H240.881Z"
        fill="#BEBEBE" />
    <path opacity="0.3" d="M279.881 101H314.881V109H279.881V101Z" fill="#BEBEBE" />
    <rect x="203.5" y="1.5" width="188.119" height="96.9702" rx="2.5" fill="#2E2E2E"
        stroke="#9E9E9E" stroke-width="3" />
    <g mask="url(#mask1_12846_20756)">
        <path opacity="0.4"
            d="M380.88 17C380.88 14.7909 379.09 13 376.88 13H201.88V86H376.88C379.09 86 380.88 84.2091 380.88 82V17Z"
            fill="#63D0DF" />
        <path opacity="0.4"
            d="M380.88 94C380.88 91.7909 379.09 90 376.88 90H201.88V163H376.88C379.09 163 380.88 161.209 380.88 159V94Z"
            fill="#63D0DF" />
    </g>
    <g mask="url(#mask2_12846_20756)">
        <rect x="80.9998" y="27" width="232" height="46" rx="23" fill="#030303" />
        <path
            d="M121.808 42.324V58.5H118.472V45.684L114.92 47.868L113.432 45.564L118.808 42.324H121.808Z"
            fill="white" />
    </g>
    <g mask="url(#mask3_12846_20756)">
        <rect x="80.9998" y="27" width="232" height="46" rx="23" fill="#030303" />
    </g>
</svg>
    

What is the expected behavior?

Expected behaviour is to support the mask-type attribute.

Version

crates.io release

Operating System

Linux

Do you have any log output?

No response

@acolombier
Copy link
Author

Closing as 0.13.0 has now been released

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant