Open Hellomik2002 opened 1 year ago
Thanks! Let me know if there's any time-sensitive need for this; otherwise it might stay on the back burner for a while.
Completed? I didn't do anything :-)
Seems like a valid new feature.
@zathras this would be an interesting addition for us :)
I've prepared an example file:
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 113 113" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="t" x1="119.87" x2="159.54" y1="475.04" y2="538.62" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1, 0, 0, 1, -83.608887, -454.509949)">
<stop offset="0" stop-color="#575657"/>
<stop offset="1" stop-color="#828182"/>
</linearGradient>
<mask id="u" width="77.94" height="6.42" x="101.25" y="537.8" maskUnits="userSpaceOnUse">
<g filter="url(#a)">
<g mask="url(#b)">
<path fill="url(#c)" d="M179.18 538.33v3.58c0 1.27-1.06 2.31-2.35 2.31h-73.25c-1.29 0-2.34-1.04-2.34-2.31v-4.11c.29.11 1.93 2.66 2.27 2.66h73.58c.34 0 1.78-2.02 2.08-2.13Z"/>
</g>
</g>
</mask>
<filter id="a" width="77.94" height="6.42" x="101.25" y="537.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-color="#fff" result="bg"/>
<feBlend in="SourceGraphic" in2="bg"/>
</filter>
<mask id="b" width="77.94" height="32766" x="101.25" y="-8492" maskUnits="userSpaceOnUse"/>
<linearGradient id="c" x1="140.22" x2="140.22" y1="551.43" y2="534.87" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff"/>
<stop offset="0.09" stop-color="#e8e8e8"/>
<stop offset="0.99"/>
</linearGradient>
<mask id="v" width="29.04" height="4.79" x="125.69" y="476.25" maskUnits="userSpaceOnUse">
<g filter="url(#d)">
<g mask="url(#e)">
<path fill="url(#f)" d="M125.69 476.25h29.04v4.79h-29.04z"/>
</g>
</g>
</mask>
<filter id="d" width="29.04" height="4.79" x="125.69" y="476.25" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-color="#fff" result="bg"/>
<feBlend in="SourceGraphic" in2="bg"/>
</filter>
<mask id="e" width="29.04" height="32766" x="125.69" y="-8492" maskUnits="userSpaceOnUse"/>
<linearGradient id="f" x1="-5954.48" x2="-5954.48" y1="53.21" y2="40.86" gradientTransform="rotate(-180 -2907.135 263.575)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff"/>
<stop offset="0.99"/>
</linearGradient>
</defs>
<path fill="#efefef" d="M 113.23 103.08 C 113.23 104.84 111.7 106.28 109.83 106.28 L 3.4 106.28 C 1.53 106.28 0 104.84 0 103.08 L 0 3.2 C 0 1.44 1.53 0 3.4 0 L 109.83 0 C 111.7 0 113.23 1.44 113.23 3.2 L 113.23 103.08 Z"/>
<path fill="url(#t)" d="M 96.5 88.33 C 96.5 89.57 95.42 90.58 94.1 90.58 L 19.11 90.58 C 17.79 90.58 16.71 89.57 16.71 88.33 L 16.71 17.95 C 16.71 16.71 17.79 15.7 19.11 15.7 L 94.1 15.7 C 95.42 15.7 96.5 16.71 96.5 17.95 L 96.5 88.33 Z"/>
<path fill="#d1d0d1" d="M 95.58 87.51 C 95.58 88.72 94.53 89.71 93.24 89.71 L 19.99 89.71 C 18.7 89.71 17.65 88.72 17.65 87.51 L 17.65 18.77 C 17.65 17.56 18.7 16.57 19.99 16.57 L 93.24 16.57 C 94.53 16.57 95.58 17.56 95.58 18.77 L 95.58 87.51 Z"/>
<g mask="url(#u)" transform="matrix(1, 0, 0, 1, -83.608879, -454.509949)">
<path fill="#858585" d="M179.18 538.33v3.58c0 1.27-1.06 2.31-2.35 2.31h-73.25c-1.29 0-2.34-1.04-2.34-2.31v-4.11c.29.11 1.93 2.66 2.27 2.66h73.58c.34 0 1.78-2.02 2.08-2.13Z"/>
</g>
<g mask="url(#v)" transform="matrix(1, 0, 0, 1, -83.608879, -454.509949)">
<path fill="#b3b3b3" d="M125.69 476.25h29.04v4.79h-29.04z" opacity=".4"/>
</g>
</svg>
any hope that gradient filters will be implemented?
any hope that gradient filters will be implemented?
I just took a look at the SVG 1.1 specification of the filter element, and it's quite big. Looking at dart:ui
, there is ColorFilter
that seems to address some of the underlying functionality that would be needed; from a quick look, it's not clear to me how complete Flutter's underlying support is at this time. I see there's also vector_math
, vector_math_geometry
and related packages that might come into play.
For reference, here's the SVG 1.1 spec for filters: https://www.w3.org/TR/SVG11/filters.html
All in all, this looks to be a large undertaking. I wouldn't rule out the possibility, particularly if e.g. someone who knows a lot about filter effects were to volunteer or something. But given the scope of the work that would be required, this looks unlikely. It's quite a stretch from the stated scope of the library.
Here's another datapoint:
I also appear to be encountering this issue with the following SVG:
Here's what I'm seeing in a Flutter App:
Here's what I was expecting:
Notice how some of the gradients appear to be wrong.
The following appears to be an error message reported by jovial_svg:
flutter: Ignoring filter attribute(s) in g
flutter: Ignoring filter tag(s)
flutter: Ignoring feFlood tag(s)
flutter: Ignoring feBlend tag(s)
flutter: Ignoring feGaussianBlur tag(s)
It looks like these tags are not supported yet, which is how I found this issue.
That SVG was exported from Figma.
flutter: Ignoring filter tag(s) flutter: Ignoring feFlood tag(s) flutter: Ignoring feColorMatrix tag(s) flutter: Ignoring feOffset tag(s) flutter: Ignoring feGaussianBlur tag(s) flutter: Ignoring feBlend tag(s) flutter: Ignoring filter attribute(s) in g