Skip to content

linearGradient will give a drastically different result. #1190

@tyoshinaka

Description

@tyoshinaka

SVG.NET is a very useful open source software.
Thank you as always.

I'm having trouble with a linear gradient.

If X1==X2, you get the expected behavior.
But if they differ by even a small amount, the linear gradient will give a drastically different result.

Is there a workaround?

var svgDocument = SvgDocument.Open(inFullPath);
var pngImage = svgDocument.Draw();
pngImage.Save(outFullPath);

Input XML file

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xml="http://www.w3.org/XML/1998/namespace" width="600" height="300" viewBox="0, 0, 600, 300">
  <g>
    <defs>
      <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="MyGradient1">
        <stop offset="0%" stop-color="red" />
        <stop offset="100%" stop-color="blue" />
      </linearGradient>
		<linearGradient x1="50%" y1="0%" x2="49%" y2="100%" id="MyGradient2">
			<stop offset="0%" stop-color="red" />
			<stop offset="100%" stop-color="blue" />
		</linearGradient>
	</defs>
	  <rect x="50" y="50" width="200" height="200" stroke-width="1" style="fill:url(#MyGradient1);" />
	  <rect x="300" y="50" width="200" height="200" stroke-width="1" style="fill:url(#MyGradient2);" />
  </g>
</svg>

Output PNG file

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions