SVG images with LinearGradient are not shown correctly

Hi everyone,

I'm using -or trying- to use SVG files in my current project, those SVG are provided by an external designer to my company and we asked him for help, but after few changes we've ended in the same way.

The problem is these SVG has a LinearGradient in it's definitions; also Filters which are not shown correctly with FFImageLoading plugin; so I decided to create my custom control using SkiaSharp to paint SVG and now the issue with Filters is fixed, but remains the one with LinearGradient.

This is the part of the SVG with I'm having issues:

    <defs>
        <linearGradient id="c" x1="50%" x2="50%" y1="0%" y2="100%">
            <stop offset="0%" stop-color="#00ACEC"/>
            <stop offset="32.769%" stop-color="#00ABEB"/>
            <stop offset="100%" stop-color="#4370B6"/>
        </linearGradient>
        <rect id="a" width="90" height="52" rx="4"/>
        <filter id="b" width="122.2%" height="138.5%" x="-8.9%" y="-15.4%" filterUnits="objectBoundingBox">
            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
            <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="3"/>
            <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.114619755 0"/>
        </filter>
    </defs>

I don't know how to fix this one, any idea or workaround will be truly appreciated.

Thanks in advance!

Answers

Sign In or Register to comment.