praeclarum / NGraphics

NGraphics is a cross platform library for rendering vector graphics on .NET. It provides a unified API for both immediate and retained mode graphics using high quality native renderers.
MIT License
711 stars 133 forks source link

gradientTransform not working #79

Open AndreaSteiner opened 7 years ago

AndreaSteiner commented 7 years ago

I have an SVG which includes gradients and gradientTransformis not being applied. I attempted different types of transforms (instead of the matrix, as in the example below) and was unable to see any transform results. I'm testing by using the SampleApps project included with the source code to display my svg.

Here's an example of a linear gradient with the gradientTransform:

<linearGradient id="SVGID_1_" x1="36.8%" y1="99%" x2="36.8%" y2="1%" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 -1 0 512)" > 
   <stop  offset="0%" stop-color="#FFFFFF"/>  
   <stop  offset="100%" stop-color="#CCCCCC"/>
</linearGradient>

Not specifically transform bug related, it took a bit of trial and error to get my gradients working at all. If you look at the ErulisseuiinSpaceshipPack images output by the tests, you can see that the gradients aren't being displayed correctly on android and iOS. ( https://github.com/praeclarum/NGraphics/blob/master/TestResults/ErulisseuiinSpaceshipPack.svg-Android.png )

I have found, if you use percentage based values in the SVG for x1, y1, x2, and y2, then the gradients DO display correctly on Android (haven't tried iOS yet). For example:

<linearGradient id="SVGID_1_" x1="36.8%" y1="99%" x2="36.8%" y2="1%" gradientUnits="userSpaceOnUse" > <!-- works -->
<linearGradient id="SVGID_1_" x1="139.5005" y1="511.668" x2="139.5005" y2="4.383" gradientUnits="userSpaceOnUse" > <!-- doesn't work --> 

The other thing I found is that the package doesn't seem to like the style tag on the gradient stops.

<stop  offset="0" stop-color="#FFFFFF"/>  <!-- works -->
<stop  offset="0"  style="stop-color:#FFFFFF"/>  <!-- doesn't work -->

Maybe that info can save someone else some time.