Re: Change SVG path attributes on the fly - Data Driven SVG

I'm currently working on a global map with paths for each country. All paths are stored in an xml file, worldPaths.xml:
<GlobalPaths  xmlns="http://www.w3.org/2000/svg" >
<path id="myCountryCode" d="..." />
<path id="myCountryCode" d="..." />
<path id="myCountryCode" d="..." />
...
</GlobalPaths>
Then I call the following to load all path elements into an inline svg called worldSVG

function loadPaths()
{
   var loadXML = new XMLHttpRequest;
	function handler()
	{
		if(loadXML.readyState == 4)
		{
			if (loadXML.status == 200) //---loaded ok---
			{

                    var parser = new DOMParser();
	  			   var mapXMLDoc=parser.parseFromString(loadXML.responseText, "text/xml").documentElement ;

                	var children=mapXMLDoc.childNodes

				   for(var k=0;k<children.length;k++)
				   {
                      var child=children.item(k).cloneNode(true)
                      worldSVG.appendChild(child)
				   }
                  			}
     }
	if (loadXML != null)
	{
		loadXML.open("GET", "worldPaths.xml", true);
		loadXML.onreadystatechange = handler;
		loadXML.send();
	}
}

You can add attributes to each xml element as it is loaded.

I'm using IE10 and have not run this in other browsers.

--- In [email protected], "flyfishac" <flyfishac@...> wrote:
>
> 
> Hello,
> 
> I'm new to SVG and also new to the forum. I have an SVG file of the
> state of Georgia which shows each county. Each county is its own path
> with an ID associated to it (see example below). I would like to be able
> to change attributes on the fly from my browser and have them stored. I
> assume that you would hook a database to the file but I cannot seem to
> get traction. Does anyone have any advice on how to achieve this or can
> anyone recommend any real working examples? Any help is greatly
> appreciated.
> 
> 
> 
> <path
>      
> style="font-size:12px;fill:#ffffff;fill-rule:nonzero;stroke:#000000;stro\
> ke-width:1.03440738000000000;stroke-linecap:butt;stroke-linejoin:bevel;s\
> troke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:n\
> one"
>       d="m 300.31666,332.19714 -2.48789,9.98219 -10.52412,7.22181
> -7.62888,12.22744 -1.89344,9.46708 -36.40505,-9.33099 8.61961,-22.55957
> 7.5078,-1.05948 42.81197,-5.94848"
>       id="13241"
>       inkscape:label="Rabun, GA"
>       inkscape:connector-curvature="0"
>       onclick="window.open('http://Google.com','_blank');"
>       onmouseover="evt.target.setAttribute('opacity', '0.5');"
>       onmouseout="evt.target.setAttribute('opacity','1)');" />
>