SVG 错误：访问属性“someFunction”的权限被拒绝

请看一下这个小提琴：http://jsfiddle.net/arasbm/Tyxea/14/ http://jsfiddle.net/arasbm/Tyxea/14/

正如你所看到的，我想在 SVG 元素上触发事件时对其进行转换。您可以单击箭头，它应该可以工作，因为它使用嵌入 SVG 范围内的 JavaScript 代码：

<svg id="my-svg" width="20cm" height="20cm" viewBox="0 0 600 600"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example showing how to transform svg elements 
        using SVGTransform objects</desc>
  <script type="application/ecmascript"> <![CDATA[
    function transformMe(evt) {
      // svg root element to access the createSVGTransform() function
      var svgroot = evt.target.parentNode;

      // SVGTransformList of the element that has been clicked on
      var tfmList = evt.target.transform.baseVal;

      // Create a seperate transform object for each transform
      var translate = svgroot.createSVGTransform();
      translate.setTranslate(50,5);

      var rotate = svgroot.createSVGTransform();
      rotate.setRotate(10,0,0);

      var scale = svgroot.createSVGTransform();
      scale.setScale(0.8,0.8);

      // apply the transformations by appending the SVGTranform objects 
      // to the SVGTransformList associated with the element
      tfmList.appendItem(translate);
      tfmList.appendItem(rotate);
      tfmList.appendItem(scale);
    }
  ]]> </script>

  <polygon fill="orange" stroke="black" 
    stroke-width="5" 
    points="100,225 100,115 130,115 70,15 70,15 10,115 40,115 40,225"
    onclick="transformMe(evt)"/>
  ...
</svg>

这可行，但我希望将我的 JavaScript 代码与SVG元素。根据这个 W3C 文档 http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#scripting_HTML我应该能够通过使用引用来调用 javascript 函数top范围。这就是我对矩形所做的：

  <rect x="200" y="100" width="100" height="100" 
    fill="yellow" stroke="black" stroke-width="5"  
    onclick="top.transformMe(evt)"/>

但是，单击矩形会在控制台中出现以下错误：

  Error: Permission denied to access property 'transformMe' @ http://fiddle.jshell.net/arasbm/Tyxea/14/show/:1

有人可以告诉我如何解决这个问题。本例中演示的真正问题是：使用这些元素之外的 JavaScript 代码处理 SVG 元素上的事件的正确方法是什么？

小提琴代码中的问题是 JSFiddle 安排代码的方式。

首先，Javascript 在函数体中进行计算，因此您的方法 TransformMe 不会成为全局函数。添加

window.transformMe = transformMe 

放在 Javascript 的末尾，以便该函数成为全局函数。

然后，再次在 fiddle 中，代码在 iframe 中运行（也许您的页面不同），“top”指的是顶部文档，在 jsfiddle.net 的情况下，您因此尝试进行跨域 JS 调用。如果您在打开开发人员工具的情况下运行小提琴，您可以看到这一点：控制台给出了正确的提示。

最后但并非最不重要的一点是，在当前的浏览器实现中，我认为您根本不需要“顶部”引用。相反，您可以简单地调用全局函数（刚刚使用 IE、Chrome 和 FF 进行了测试）这对我有用 http://jsfiddle.net/Tyxea/16/).