Closed riccardoch closed 3 years ago
This is almost certainly a bug in flutter web. Safari probably doesn't have color filtering enabled
Your color will work in Safari if you wrap a defs
tag. It seems that wrapping your references in defs is encouraged but not obligatory. I think this is a bug in safari.
This is almost certainly a bug in flutter web. Safari probably doesn't have color filtering enabled
Thanks for the reply! A bug with SVG? Because with PNG it works.
@bardia-mhd do you mean this?
So using the SVG I've posted I need something like:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="vector">
<defs>
<path id="path_1"
d="M 19 18 C 17.346 18 16 16.654 16 15 C 16 13.346 17.346 12 19 12 C 20.654 12 22 13.346 22 15 C 22 16.654 20.654 18 19 18 Z M 19 13 C 17.897 13 17 13.897 17 15 C 17 16.103 17.897 17 19 17 C 20.103 17 21 16.103 21 15 C 21 13.897 20.103 13 19 13 Z"
fill="#000000" />
<path id="path_11"
d="M 18.682 9.002 C 17.95 8.418 14.607 6 9.5 6 C 8.534 6 6.069 6.099 3.848 7 L 1.5 7 C 1.298 7 1.115 7.122 1.038 7.309 C 0.96 7.496 1.003 7.71 1.146 7.854 L 1.634 8.342 C 0.549 9.316 0 10.544 0 12 C 0 13.717 0.155 16 1.5 16 L 1.711 16 C 1.577 15.693 1.5 15.356 1.5 15 C 1.5 13.619 2.619 12.5 4 12.5 C 5.381 12.5 6.5 13.619 6.5 15 C 6.5 15.356 6.423 15.693 6.289 16 L 16.711 16 C 16.577 15.693 16.5 15.356 16.5 15 C 16.5 13.619 17.619 12.5 19 12.5 C 20.381 12.5 21.5 13.619 21.5 15 C 21.5 15.356 21.423 15.693 21.289 16 L 22.5 16 C 23.104 16 24 15.37 24 14.5 L 24 12.5 C 24 11.552 22.363 9.081 18.682 9.002 Z M 15.5 11 L 10.5 11 C 10.224 11 10 10.776 10 10.5 L 10 8.5 C 10 8.224 10.224 8 10.5 8 C 10.776 8 11 8.224 11 8.5 L 11 10 L 15.5 10 C 15.776 10 16 10.224 16 10.5 C 16 10.776 15.776 11 15.5 11 Z"
fill="#000000" />
<path id="path_12"
d="M 4 18 C 2.346 18 1 16.654 1 15 C 1 13.346 2.346 12 4 12 C 5.654 12 7 13.346 7 15 C 7 16.654 5.654 18 4 18 Z M 4 13 C 2.897 13 2 13.897 2 15 C 2 16.103 2.897 17 4 17 C 5.103 17 6 16.103 6 15 C 6 13.897 5.103 13 4 13 Z"
fill="#000000" />
</defs>
<use x="0" y="0" xlink:href="#path_1"/>
<use x="0" y="0" xlink:href="#path_11"/>
<use x="0" y="0" xlink:href="#path_12"/>
</svg>
Can you share a full working reproduction of this? I can probably test it out locally on Safari.
Also, are you seeing this on desktop or mobile? And are you using CanvasKit backend or HTML renering backend?
The issue is on Safari for iOS, like I wrote in the first post on Chrome iOS app everything works as expected. To reproduce the issue is enough creating a page with SvgPicture Widget.
I've built the app using auto setting, so it uses html for mobile and canvasKit for desktop
I've tried forcing canvasKit and now It's working also on Safari for iOS!
Yeah. The html backend probably doesn't have color filters implemented for safari
Any update on this stated issue ?
Thanks for the great library! Everything works fine except tinting on Safari app on iOS (on Chrome app it works).
Here an example of SVG I'm using: