CODEWITHSUNDEEP
javascriptdomsvgtags
Soraya Lutete
Soraya Lutete

Reputation: 1

Javascript inside SVG Image doesn't get executed

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" onclick="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 :)

Upvotes: 0

Views: 660

Answers (1)

Robert Longson
Robert Longson

Reputation: 123995

In

onclick="changeborder(path1)"

there is no such thing as path1 so this is a syntax error. If you change this to say 

onclick="changeborder('path1')"

Then your code will run. You have another problem in that there are unwanted spaces in the stroke-dasharray CSS property in the set attribute call that should be removed but even without that fix if you change the onclick you'll see that clicking on the shape will lead to a change in colour.

Upvotes: 1

Related Questions