C# how to append SvgGradientElement to GcSvgDocument

C# how to append SvgGradientElement to GcSvgDocument

Posted by: vimalkumar.panneerselvam on 6 March 2023, 8:44 pm EST

• 

  vimalkumar.panneerselvam

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 6 March 2023, 8:44 pm EST

  public override void draw(GcSvgDocument svgDoc, SvgGradientElement svgG)
  
  {
  
  svgDoc.RootSvg.Children.Add(svgG.Fill = ( new SvgPaint(new SvgColor(Color.Black)) }) );

      }
  

• 

  nitin.sharma

  

  • Post Options:
  • Link
    Copy

  Posted 25 June 2023, 8:22 pm EST

  Hi,

  Thanks for reaching out to us.

  There are two types of SvgGradientElement:

  • SvgLinearGradientElement
  • SvgRadialGradientElement

  You can append a GradientElement in SVG and then you can Fill any element with that Gradient using SvgReference.(see code below)

  //Append Gradient
  var svgDef = new SvgDefsElement();
  var svgLinearGradient = new SvgLinearGradientElement() { ID = "grad1", X1 = new SvgLength(0,SvgLengthUnits.Percentage), Y1 = new SvgLength(0, SvgLengthUnits.Percentage), X2 = new SvgLength(0, SvgLengthUnits.Percentage), Y2 = new SvgLength(100, SvgLengthUnits.Percentage) };
  svgLinearGradient.Children.Add(new SvgStopElement() { Offset = 0, StopColor = new SvgColor(Color.Red), StopOpacity = 1 });
  svgLinearGradient.Children.Add(new SvgStopElement() { Offset = 100, StopColor = new SvgColor(Color.Yellow), StopOpacity = 1 });
  svgDef.Children.Add(svgLinearGradient);
  svg.RootSvg.Children.Add(svgDef);
  
  //Apply Gradient on a existing element
  var ellipse =svg.RootSvg.Children[0] as SvgEllipseElement;
  ellipse.Fill = new SvgPaint(new SvgReference("grad1"));

  Please refer the attached sample for the same: GradientSvg.zip

  Best Regards,
  
  Nitin