Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript DOM SVG
Hi everybody :
i've been trying to script an svg file that with some basic javascript.
to change the border color of an svg element ( a path ), using the event onmouseover(), but the problem i'm having is that the code doesn't even get executed.
Here is how my code and my svg file looks like :
 
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <!-- Created with Inkscape (http://www.inkscape.org/) -->

    <svg
       xmlns:dc="http://purl.org/dc/elements/1.1/"
       xmlns:cc="http://creativecommons.org/ns#"
       xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
       xmlns:svg="http://www.w3.org/2000/svg"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
       xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
       width="1428.1428"
       height="1259.5714"
       id="svg2"
       version="1.1"
       inkscape:version="0.48.4 r9939"
       sodipodi:docname="planniveau1.svg">
      <defs
       id="defs4" />
      <sodipodi:namedview
         id="base"
         pagecolor="#ffffff"
         bordercolor="#666666"
         borderopacity="1.0"
         inkscape:pageopacity="0.0"
        inkscape:pageshadow="2"
         inkscape:zoom="0.35355339"
         inkscape:cx="861.1875"
         inkscape:cy="599.88672"
         inkscape:document-units="px"
         inkscape:current-layer="layer3"
         showgrid="false"
         fit-margin-top="0"
         fit-margin-left="0"
         fit-margin-right="0"
         fit-margin-bottom="0"
         inkscape:snap-global="false"
         inkscape:window-width="1280"
         inkscape:window-height="738"
         inkscape:window-x="-8"
         inkscape:window-y="-8"
         inkscape:window-maximized="1" />
      <metadata
         id="metadata7">
        <rdf:RDF>
          <cc:Work
             rdf:about="">
            <dc:format>image/svg+xml</dc:format>
            <dc:type
               rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
             <dc:title />
           </cc:Work>
        </rdf:RDF>
      </metadata>
      <g
         inkscape:groupmode="layer"
         id="layer3"
         inkscape:label="escaliers"
         style="display:inline">
     
        <path
           style="fill:none;stroke:#d4322d;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:0.49803922;stroke-
 
dasharray:none"
           d="m 582,676.57141 c -98.5,0.5 -98.5,0.5 -98.5,0.5 l 0,57.5 99.5,0 z"
           id="path1"
           inkscape:connector-curvature="0"
            sodipodi:nodetypes="bbbbb"  önclick="changeborder(path1)"/>
    
      </g>
      <script type="application/javascript"><![CDATA[
    function changeborder(path3073)
    {
    var path = document.getElementById('path1');
    path.setAttribute('style','fill:none;stroke:#fe9900;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:0.49803922;stroke-  
 
  dasharray:none');
    }
    </script>
    </svg>
 
so what im trying to do is to change the style.stroke:#d4322d to style.stroke:#fe9900
 
if you can help that would be wonderful
its my first time working with svg file , so would you excuse any obvious fault you may find in my code Smile | :)
Posted 29-Apr-13 13:05pm

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

There are a couple of things that you have to fix here. The first is a missing ]]> at the end of the script block to close the <![CDATA[.
 
Next is your function - the argument list contains a single variable, "path3073", which you are not using. When you call the function you are passing in a variable called "path1" which is undefined. If you meant to pass in the ID of the path you should wrap it in quotes, otherwise you can remove it from the function call since the ID is hardcoded in the function anyway.
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 304
1 Sergey Alexandrovich Kryukov 295
2 Shweta N Mishra 216
3 Maciej Los 210
4 PIEBALDconsult 184
0 OriginalGriff 7,630
1 Sergey Alexandrovich Kryukov 7,022
2 DamithSL 5,586
3 Manas Bhardwaj 4,946
4 Maciej Los 4,525


Advertise | Privacy | Mobile
Web02 | 2.8.1411023.1 | Last Updated 30 Apr 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100