Loading ...
Sorry, an error occurred while loading the content.
 

Change SVG path attributes on the fly - Data Driven SVG

Expand Messages
  • flyfishac
    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
    Message 1 of 2 , Jul 23, 2013
      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)');" />
    • Francis Hemsher
      I m currently working on a global map with paths for each country. All paths are stored in an xml file, worldPaths.xml:
      Message 2 of 2 , Jul 24, 2013
        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 svg-developers@yahoogroups.com, "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)');" />
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.