SVG Image中的Javascript无法执行 [英] Javascript inside SVG Image doesn't get executed

问题描述

大家好：

我一直在尝试使用一些基本的javascript脚本编写一个svg文件。

更改svg元素的边框颜色（a路径），使用事件onmouseover（），但我遇到的问题是代码甚至没有被执行。

以下是我的代码和我的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>

所以我要做的就是将style.stroke：＃d4322d更改为style.stroke：＃fe9900



如果你能帮我那么精彩

这是我第一次使用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 :)

推荐答案

这里有一些你需要解决的问题。第一个是在脚本块末尾缺少]]> 来关闭<！[CDATA [。



接下来是你的函数 - 参数列表包含一个你没有使用的变量path3073。当您调用该函数时，您将传入一个名为path1的变量，该变量未定义。如果你打算传入路径的ID，你应该用引号将它包起来，否则你可以从函数调用中删除它，因为无论如何ID都在函数中被硬编码。

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.

这篇关于SVG Image中的Javascript无法执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！