search

dnfield / flutter_svg

SVG parsing, rendering, and widget library for Flutter
MIT License
1.64k stars 449 forks source link

some 'style' attribute will cause the svg file to fail to render. #1077

Open xyqjay opened 2 weeks ago

xyqjay commented 2 weeks ago

  1. With the style attribute, it can be rendered

    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="icon/file">
<path id="Vector (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M0.666992 1.66667C0.666992 1.29848 0.965469 1 1.33366 1H14.667C15.0352 1 15.3337 1.29848 15.3337 1.66667V14.0573C15.3337 14.1046 15.3287 14.1507 15.3194 14.1952C15.3288 14.2398 15.3337 14.286 15.3337 14.3333C15.3337 14.7015 15.0352 15 14.667 15H4.33886C3.97067 15 3.67219 14.7015 3.67219 14.3333C3.67219 13.9651 3.97067 13.6667 4.33886 13.6667H14.0003V6.33333H2.00033V10.0573C2.00033 10.4255 1.70185 10.724 1.33366 10.724C0.965469 10.724 0.666992 10.4255 0.666992 10.0573V1.66667ZM2.00033 5V2.33333H14.0003V5H2.00033ZM2.66699 3.66553C2.66699 3.29734 2.96547 2.99887 3.33366 2.99887H3.66699C4.03518 2.99887 4.33366 3.29734 4.33366 3.66553C4.33366 4.03372 4.03518 4.3322 3.66699 4.3322H3.33366C2.96547 4.3322 2.66699 4.03372 2.66699 3.66553ZM5.00033 3.66667C5.00033 3.29848 5.2988 3 5.66699 3H12.667C13.0352 3 13.3337 3.29848 13.3337 3.66667C13.3337 4.03486 13.0352 4.33333 12.667 4.33333H5.66699C5.2988 4.33333 5.00033 4.03486 5.00033 3.66667ZM9.79538 8.52821C10.0534 8.27056 10.4706 8.26808 10.7318 8.52264L12.2253 9.97864C12.4889 10.2357 12.4943 10.6577 12.2373 10.9214C11.9802 11.185 11.5582 11.1904 11.2945 10.9334L10.272 9.93648L8.05631 12.1485C7.79987 12.4045 7.3859 12.4088 7.12419 12.1582L5.40469 10.5115L1.80747 14.1457C1.54845 14.4074 1.12635 14.4095 0.864672 14.1505C0.602994 13.8915 0.600835 13.4694 0.859849 13.2077L4.91838 9.10745C5.17438 8.84882 5.59048 8.84325 5.8533 9.09495L7.5756 10.7443L9.79538 8.52821Z" fill="white" style="fill:white;fill-opacity:1;"/>
</g>
</svg>

  2. With the style attribute, it can't be rendered!!! (It can be render by Chrome or Edge or Mac's Preview)

    <svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="icon">
<path id="Vector" d="M9 4.5L6.5 7.5L4 4.5H9Z" fill="#888888" stroke="#888888" style="fill:#888888;fill:color(display-p3 0.4784 0.4941 0.5294);fill-opacity:1;stroke:#888888;stroke:color(display-p3 0.4784 0.4941 0.5294);stroke-opacity:1;" stroke-linejoin="round"/>
</g>
</svg>

    2.1 Delete the style attribute in 2 , it can be rendered

    <svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="icon">
<path id="Vector" d="M9 4.5L6.5 7.5L4 4.5H9Z" fill="#888888" stroke="#888888" stroke-linejoin="round"/>
</g>
</svg>