- Welcome, Guest. Please Login or Register
MindFusion  
  Version 2 of our Xamarin Calendar component adds Resource view and support for Universal Windows Platform. Now beta testing spreadsheet component for Java Swing.  
  HomeHelpSearchLoginRegister   
     
     
   
 
Page Index Toggle Pages: 1 Send Topic Print  
SVG Colorization
Read 701 times

38Mikes   Offline
YaBB Newbies
*
Posts: 7
I Love MindFusion!


   
     
 
SVG Colorization
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.
 
 
 
IP Logged    
 
     

38Mikes   Offline
YaBB Newbies
*
Posts: 7
I Love MindFusion!


   
     
 
Re: SVG Colorization
Reply #1 - 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...
 
 
 
IP Logged    
 
     

Slavcho   Offline
God Member
*****
Posts: 881
Gender: male
tech.support


   
     
 
Re: SVG Colorization
Reply #2 - 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
 
 
 
IP Logged    
 
     

38Mikes   Offline
YaBB Newbies
*
Posts: 7
I Love MindFusion!


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

 
 

test_svg.zip (0 KB | 49 )
 
IP Logged    
 
     

Slavcho   Offline
God Member
*****
Posts: 881
Gender: male
tech.support


   
     
 
Re: SVG Colorization
Reply #4 - 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
 
 
 
IP Logged    
 
     

38Mikes   Offline
YaBB Newbies
*
Posts: 7
I Love MindFusion!


   
     
 
Re: SVG Colorization
Reply #5 - 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.
 
 
 
IP Logged    
 
     

Slavcho   Offline
God Member
*****
Posts: 881
Gender: male
tech.support


   
     
 
Re: SVG Colorization
Reply #6 - Feb 9th, 2017 at 1:06pm
 
In a few weeks.
 
 
 
IP Logged    
 
     

jarv2003   Offline
YaBB Newbies
*
Posts: 5
I love YaBB 1G - SP1!


   
     
 
Re: SVG Colorization
Reply #7 - 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.
 
 
 
IP Logged    
 
     

Slavcho   Offline
God Member
*****
Posts: 881
Gender: male
tech.support


   
     
 
Re: SVG Colorization
Reply #8 - 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.
 
 
 
IP Logged    
 
     

Slavcho   Offline
God Member
*****
Posts: 881
Gender: male
tech.support


   
     
 
Re: SVG Colorization
Reply #9 - Mar 14th, 2017 at 12:00pm
 
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) -
http://mindfusion.eu/_beta/diagram_svg.zip

Regards,
Slavcho
 
 
 
IP Logged    
 
     
Page Index Toggle Pages: 1 Send Topic Print