0

我一直在尝试用一些基本的 javascript 编写一个 svg 文件。使用事件 onmouseover() 更改 svg 元素（路径）的边框颜色，但我遇到的问题是代码甚至没有被执行。这是我的代码和我的 svg 文件的样子：

<?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>

所以我想要做的是将 style.stroke:#d4322d 更改为 style.stroke:#fe9900

如果您能提供帮助，那将是我第一次使用 svg 文件，所以您能原谅您在我的代码中发现的任何明显错误吗:)

4

1 回答 1

1

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.

于 2013-04-30T07:51:15.813 回答