通过javascript访问svg元素可以在线工作，但不能在本地文件中工作_Javascript_Dom_Svg

通过javascript访问svg元素可以在线工作，但不能在本地文件中工作

javascript dom svg

通过javascript访问svg元素可以在线工作，但不能在本地文件中工作,javascript,dom,svg,Javascript,Dom,Svg,我试图复制以下示例（），它能够操作通过或从外部文件读取的svg“文档”中的元素。奇怪的是，它在Chrome和Firefox中都可以在线运行，但是当我下载文件并在本地打开它们时，脚本什么也没做——星星仍然是橙色的实际上，唯一的更改是更新svg文件的路径图片会加载，因此它会查找svg图像文件，但更改颜色的脚本不起作用。在Chrome的控制台中，似乎contentDocument和getSVGDocument（）都返回了null值。我可以在dom检查器中看到#文档“元素”，但无法通过编程方式访问其

我试图复制以下示例（），它能够操作通过

或

从外部文件读取的svg“文档”中的元素。奇怪的是，它在Chrome和Firefox中都可以在线运行，但是当我下载文件并在本地打开它们时，脚本什么也没做——星星仍然是橙色的

实际上，唯一的更改是更新svg文件的路径

图片会加载，因此它会查找svg图像文件，但更改颜色的脚本不起作用。在Chrome的控制台中，似乎

contentDocument

和

getSVGDocument（）

都返回了

null

值。我可以在dom检查器中看到

#文档

“元素”，但无法通过编程方式访问其中的svg元素

我已经花了几个小时搜寻了几十篇帖子，试图找到一种方法让这个基本想法发挥作用。从本质上讲，我希望将html、javascript和svg文件分开，并希望它们是可交换的（它们是javascript应该处理的映射）

以下是svg：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100%"
     height="100%"
     viewBox="0 0 300 300">

  <title>SVG Logo</title>
  <desc>Designed for the SVG Logo Contest in 2006 by Harvey Rayner, and adopted by W3C in 2009. It is available under the Creative Commons license for those who have an SVG product or who are using SVG on their site.</desc>

   <g stroke-width="38.0086" stroke="#000">
     <g id="svgstar" transform="translate(150, 150)">
       <path id="svgbar" fill="#ffb13b"
         d="M-84.1487,-15.8513 a22.4171,22.4171 0 1 0 0,31.7026 h168.2974 a22.4171,22.4171 0 1 0 0,-31.7026 Z"/>
       <use xlink:href="#svgbar" transform="rotate(45)"/>
       <use xlink:href="#svgbar" transform="rotate(90)"/>
       <use xlink:href="#svgbar" transform="rotate(135)"/>
     </g>
   </g>
   <use xlink:href="#svgstar"/>

</svg>

这是因为使用

文件：

协议打开任何内容都会触发一些额外的安全措施，画布也会受到污染，就好像它是从另一个没有CORS的域加载的一样。我读错了，但我所说的仍然适用：

文件：

协议在进行这种访问时总是触发CORS错误，为了安全起见，防止网站阅读你的资料。想象一下，通过一个简单的XHR请求读取c:\驱动器上的内容会是什么样子。非常感谢@IsmaelMiguel，马上。

<!DOCTYPE html>
<html>
    <head>
        <title>This shows how to get elements inside included svg images from the surrounding html.</title>
    </head>
    <body>
        <object class="emb" data="borrowedpic.svg" width="100" height="100" type="image/svg+xml"></object>
        <embed class="emb" src="borrowedpic.svg" width="100" height="100" type="image/svg+xml" />
        <iframe class="emb" src="borrowedpic.svg" width="100" height="100" style="border:0" ></iframe>
        <p>
            You should see three svg logo images with green fill above here.
        </p>
        <p>
            If any of the logos are shown in orange that means the browser failed to access the DOM of the referenced svg resource.
            From left to right we have &lt;object&gt;, &lt;embed&gt; and &lt;iframe&gt; that all reference the <a href="borrowedpic.svg">same svg file</a>.
            The script gets the referenced svg document either with <code>contentDocument</code> or <code>getSVGDocument()</code> and then sets the fill color
            to lime green.
        </p>
        <p>
            View source to see how this works.
        </p>
        <script>//<![CDATA[

        // wait until all the resources are loaded
        window.addEventListener("load", findSVGElements, false);

        // fetches the document for the given embedding_element
        function getSubDocument(embedding_element)
        {
            if (embedding_element.contentDocument)
            {
                return embedding_element.contentDocument;
            }
            else
            {
                var subdoc = null;
                try {
                    subdoc = embedding_element.getSVGDocument();
                } catch(e) {}
                return subdoc;
            }
        }

        function findSVGElements()
        {
            var elms = document.querySelectorAll(".emb");
            for (var i = 0; i < elms.length; i++)
            {
                var subdoc = getSubDocument(elms[i])
                if (subdoc)
                    subdoc.getElementById("svgbar").setAttribute("fill", "lime");
            }
        }
        //]]>
        </script>
    </body>
</html>