SVG图像中的Javascript不';我不会被处决
我一直在尝试编写一个svg文件,其中包含一些基本的javascript。 要更改svg元素(路径)的边框颜色,请使用onmouseover()事件,但我遇到的问题是代码甚至无法执行。 下面是我的代码和svg文件的样子:SVG图像中的Javascript不';我不会被处决,javascript,dom,svg,tags,Javascript,Dom,Svg,Tags,我一直在尝试编写一个svg文件,其中包含一些基本的javascript。 要更改svg元素(路径)的边框颜色,请使用onmouseover()事件,但我遇到的问题是代码甚至无法执行。 下面是我的代码和svg文件的样子: <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Created with Inkscape (http://www.inkscape.org/) --> <svg xml
<?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>
image/svg+xml
所以我想做的是将样式更改为style.stroke:#d432d。stroke:#fe9900
如果你能帮忙,那就太好了
这是我第一次使用svg文件,所以请原谅我在代码中发现的任何明显错误:)
没有path1这样的东西,因此这是一个语法错误。如果你改成说
onclick="changeborder('path1')"
然后您的代码将运行。您还有一个问题,即set属性调用中的
stroke dasharray
CSS属性中存在不需要的空格,这些空格应该被删除,但即使没有修复,如果更改onclick,您也会看到单击形状将导致颜色的更改。我自己没有在SVG中练习过JS,但是changeborder(path1)
与函数changeborder(path3073)
一起出现在我看来似乎很奇怪。另外,在JS中的样式属性中有一些空格。+1此外,您可以将此作为参数进行切换,以引用触发事件的实际元素。然后使用带有参数的参数[0].setAttribute
应该可以正常工作。
onclick="changeborder('path1')"