The MindFusion Forums
Flow Diagramming Components >> Windows Forms >> SVG Colorization
https://mindfusion.eu/Forum/YaBB.pl?num=1486320396

Message started by 38Mikes on Feb 5th, 2017 at 6:46pm

Title: SVG Colorization
Post by 38Mikes on Feb 5th, 2017 at 6:46pm
Two questions.

1) How do I get colors to appear on SvgNode objects?  After executing .LoadImage() the icon always appears black.  Colors in the SVG data are ignored.

2) How do I colorize the SVG content?  Meaning, instead of showing all black, can I make it all red, or blue, or whatever?

I've been hours reading the forum and going through the reference docs to no avail on this.  Thanks.

Title: Re: SVG Colorization
Post by 38Mikes on Feb 6th, 2017 at 1:05am
Ok, so I've figured out one thing.  I was able to get SVG colors to load by altering the original XML.  My SVG files were being exported from Illustrator with class properties.  So for example at the beginning of the file was something like this.

<style type="text/css">
     .st0{fill:#FF0000;}
</style>

And then at each object within the file (path, polygon, etc.) there was a property like so:

<polygon class="st0" points="..../>

I replaced all the class properties with style properties, such as:

<path style="fill: rgb(255, 0, 0); stop-opacity: 1;".../>

This works.  It would seem this answers my first question.  Apparently the SVG loader doesn't like style sheets.  I would still appreciate an answer to my second question.  If there was a way to simply change the brush color across the board without having to edit the SVG code and load another image that would be nice.  This at least gives me something I can work with for now though...

Title: Re: SVG Colorization
Post by Slavcho on Feb 6th, 2017 at 9:51am
The control supports CSS styles with class name selectors since version 5.3.3. If you are with a newer version there might be something else it's not recognizing - please attach the file and our developer will investigate.

We'll make some SvgContent APIs public for upcoming release to let you change attributes of loaded elements.

Regards,
Slavcho
Mindfusion

Title: Re: SVG Colorization
Post by 38Mikes on Feb 6th, 2017 at 1:33pm
I'm using version 6.3.3 of your control.  Attached are sample files.


https://mindfusion.eu/Forum/YaBB.pl?action=downloadfile;file=test_svg.zip ( 0 KB | 157 Downloads )

Title: Re: SVG Colorization
Post by Slavcho on Feb 6th, 2017 at 3:11pm
At this time we support only style definitions embedded in CDATA block (http://www.w3.org/TR/SVG/styling.html). Something like code below should work, check if Illustrator offers you an option to export the styles as CDATA -


Code (]
<style type="text/css">
    <![CDATA[
        .st0{fill:#FF0000;}
        .st1{fill:#00FF00;}
        .st2{fill:#0000FF;}
    ):

]>
</style>


Regards,
Slavcho
Mindfusion

Title: Re: SVG Colorization
Post by 38Mikes on Feb 8th, 2017 at 4:24pm
When will the APIs for SvgContent be released?  After that is released I will purchase a full source code license of the control.

Title: Re: SVG Colorization
Post by Slavcho on Feb 9th, 2017 at 1:06pm
In a few weeks.

Title: Re: SVG Colorization
Post by jarv2003 on Mar 3rd, 2017 at 10:35pm

How can the fill color or line color of an SVG node that is ALREADY in the diagram be changed programmatically.

Title: Re: SVG Colorization
Post by Slavcho on Mar 6th, 2017 at 7:33am
There's no public API for changing color of SVG elements at this time. It will be available in upcoming release as post above says.

Title: Re: SVG Colorization
Post by Slavcho on Mar 14th, 2017 at 11:00am
It's turned out there's enough public API provided to change colors from code; we just haven't imported it into help files. The SvgContent class has an SvgList collection property containing parsed top-level <svg> elements. By traversing their children, you can reach to primitive SvgElement objects whose Pen and Brush properties can be changed. There's an also a GetElementById method available to return the SvgElement with specified id -


Code (]
private void button1_Click(object sender, EventArgs e)
{
     var brush = new SolidBrush(Color.CornflowerBlue);

     var svg = ((SvgNode)diagram1.Nodes[0):

).Content.SvgList[0];

     StyleAll(svg, brush);

     diagram1.Invalidate();
}

private void button2_Click(object sender, EventArgs e)
{
     var svg = ((SvgNode)diagram1.Nodes[0]).Content.SvgList[0];

     var element = svg.GetElementById("hotspot");
     if (element != null)
     {
           var bounds = element.GetBounds();

           element.Brush = new System.Drawing.Drawing2D.LinearGradientBrush(bounds, Color.White, Color.Red, 270);

           diagram1.Invalidate();
     }
     else
           MessageBox.Show("Element not found.");
}

private void StyleAll(SvgContainer parent, Brush brush)
{
     foreach (SvgElement element in parent.Elements)
     {
           if (!(element is SvgText))
           {
                 element.Brush = brush;
           }
           if (element is SvgContainer)
                 StyleAll((SvgContainer)element, brush);
     }
}


The new build from Assemblies subfolder under the sample project here makes the CDATA discussed above optional, and also improves the SvgElement API to use a single Brush property (the old version had separate brushes for parsed gradients, textures or solid colors) -
https://mindfusion.eu/_beta/diagram_svg.zip

Regards,
Slavcho

The MindFusion Forums » Powered by YaBB 2.6.11!
YaBB Forum Software © 2000-2024. All Rights Reserved.