FFImageLoading icon indicating copy to clipboard operation
FFImageLoading copied to clipboard

Linear Gradient in svg show only 1 color

Open felipeapj opened this issue 4 years ago • 1 comments

Description

I'm trying to use <linearGradient> in a svg to fill a star for rating. I build the svg string and use SvgImageSource.FromSvgString() to set the Image Source property. But, my image always be only 1 color instead of two. The string i use is: <svg viewBox="0 -10 511.99143 511" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="a"><stop offset="0" stop-color="#ec6a36"/><stop offset="0.5" stop-color="#ec6a36"/><stop offset="0.5"/><stop offset="1"/></linearGradient></defs><path d="m510.652344 185.882812c-3.371094-10.367187-12.566406-17.707031-23.402344-18.6875l-147.796875-13.417968-58.410156-136.75c-4.3125-10.046875-14.125-16.53125-25.046875-16.53125s-20.738282 6.484375-25.023438 16.53125l-58.410156 136.75-147.820312 13.417968c-10.835938 1-20.011719 8.339844-23.402344 18.6875-3.371094 10.367188-.257813 21.738282 7.9375 28.925782l111.722656 97.964844-32.941406 145.085937c-2.410156 10.667969 1.730468 21.699219 10.582031 28.097656 4.757813 3.457031 10.347656 5.183594 15.957031 5.183594 4.820313 0 9.644532-1.28125 13.953125-3.859375l127.445313-76.203125 127.421875 76.203125c9.347656 5.585938 21.101562 5.074219 29.933593-1.324219 8.851563-6.398437 12.992188-17.429687 10.582032-28.097656l-32.941406-145.085937 111.722656-97.964844c8.191406-7.1875 11.308594-18.535156 7.9375-28.925782zm-252.203125 223.722657" fill="url(#a)"/></svg>

in SVGOMG (https://jakearchibald.github.io/svgomg/) this works fine (its a star half completed) but on android i get full colored star.

Steps to Reproduce

Set a svg image source with ( SvgImageSource.FromSvgString(<svg viewBox="0 -10 511.99143 511" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="a"><stop offset="0" stop-color="#ec6a36"/><stop offset="0.5" stop-color="#ec6a36"/><stop offset="0.5"/><stop offset="1"/></linearGradient></defs><path d="m510.652344 185.882812c-3.371094-10.367187-12.566406-17.707031-23.402344-18.6875l-147.796875-13.417968-58.410156-136.75c-4.3125-10.046875-14.125-16.53125-25.046875-16.53125s-20.738282 6.484375-25.023438 16.53125l-58.410156 136.75-147.820312 13.417968c-10.835938 1-20.011719 8.339844-23.402344 18.6875-3.371094 10.367188-.257813 21.738282 7.9375 28.925782l111.722656 97.964844-32.941406 145.085937c-2.410156 10.667969 1.730468 21.699219 10.582031 28.097656 4.757813 3.457031 10.347656 5.183594 15.957031 5.183594 4.820313 0 9.644532-1.28125 13.953125-3.859375l127.445313-76.203125 127.421875 76.203125c9.347656 5.585938 21.101562 5.074219 29.933593-1.324219 8.851563-6.398437 12.992188-17.429687 10.582032-28.097656l-32.941406-145.085937 111.722656-97.964844c8.191406-7.1875 11.308594-18.535156 7.9375-28.925782zm-252.203125 223.722657" fill="url(#a)"/></svg>) )

Expected Behavior

https://svgur.com/s/Kzh

Actual Behavior

https://svgur.com/s/Kzt

Basic Information

  • Version with issue: Xamarin.FFImageLoading.Svg.Forms 2.4.11.982
  • Platform: Android

felipeapj avatar May 10 '20 18:05 felipeapj

This is also happening on UWP. Have you found any workaround?

Estevete avatar Jan 13 '22 10:01 Estevete