Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic SVG Colorization (Read 5520 times)
38Mikes
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 8
Joined: Dec 8th, 2015
SVG Colorization
Feb 5th, 2017 at 6:46pm
Print Post  
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.
  
Back to top
 
IP Logged
 
38Mikes
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 8
Joined: Dec 8th, 2015
Re: SVG Colorization
Reply #1 - Feb 6th, 2017 at 1:05am
Print Post  
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...
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: SVG Colorization
Reply #2 - Feb 6th, 2017 at 9:51am
Print Post  
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
  
Back to top
 
IP Logged
 
38Mikes
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 8
Joined: Dec 8th, 2015
Re: SVG Colorization
Reply #3 - Feb 6th, 2017 at 1:33pm
Print Post  
I'm using version 6.3.3 of your control. Attached are sample files.

  

test_svg.zip ( 0 KB | 157 Downloads )
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: SVG Colorization
Reply #4 - Feb 6th, 2017 at 3:11pm
Print Post  
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
Select All
<style type="text/css">
    <![CDATA[
        .st0{fill:#FF0000;}
        .st1{fill:#00FF00;}
        .st2{fill:#0000FF;}
    ]]>
</style> 



Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
38Mikes
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 8
Joined: Dec 8th, 2015
Re: SVG Colorization
Reply #5 - Feb 8th, 2017 at 4:24pm
Print Post  
When will the APIs for SvgContent be released?  After that is released I will purchase a full source code license of the control.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: SVG Colorization
Reply #6 - Feb 9th, 2017 at 1:06pm
Print Post  
In a few weeks.
  
Back to top
 
IP Logged
 
jarv2003
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 7
Joined: Jan 21st, 2010
Re: SVG Colorization
Reply #7 - Mar 3rd, 2017 at 10:35pm
Print Post  

How can the fill color or line color of an SVG node that is ALREADY in the diagram be changed programmatically.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: SVG Colorization
Reply #8 - Mar 6th, 2017 at 7:33am
Print Post  
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.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: SVG Colorization
Reply #9 - Mar 14th, 2017 at 11:00am
Print Post  
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
Select All
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
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint