iced-rs / iced

A cross-platform GUI library for Rust, inspired by Elm

Home Page:https://iced.rs

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Unsupported `mask-type` style attribute in SVG

acolombier opened this issue · comments

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