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

请在这个小提琴看一看：http://jsfiddle.net/arasbm/Tyxea/14/SVG错误：权限被拒绝访问属性“someFunction”

正如你可以看到我想要改造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元素分开。根据this W3C document我应该可以通过使用top作用域来调用JavaScript函数。这就是我为矩形完成：

<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元素上的事件的正确方法是什么？

来源

2013-05-02 Aras

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

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

window.transformMe = transformMe

在您的Javascript的末尾，使该函数成为一个全局。

然后再次在小提琴中的代码运行在iframe（也许你的网页是不同的）和“顶部”是指顶级文件，并在jsfiddle.net的情况下，你是因此试图做一个跨域JS呼叫。如果您在开发人员工具打开的情况下运行小提琴，您可以看到这一点：控制台提供了正确的提示。

最后但并非最不重要的是，在当前的浏览器实现中，我不相信你完全需要“顶级”引用。相反，您可以简单地调用全局函数（只需使用IE，Chrome和FF以及it worked for me进行测试）。

来源

2013-05-02 06:31:28 Sebastian

感谢您的快速回复。不过，我认为这个问题仍然存在于你的小提琴中。你可以删除嵌入在SVG中的脚本标签，只使用外部函数。它仍然会给出同样的错误。 – Aras 2013-05-02 06:38:55

@Aras我改变了小提琴（你也可以做到这一点，这是JSFiddle的想法），它仍然适用于我测试过的所有浏览器。 – Sebastian 2013-05-03 09:21:46

我的确尝试更改jsFiddle并对其进行测试，但出于某种原因，我仍然收到错误信息，肯定是另一个问题。对于那个很抱歉。您的解决方案很好。谢谢！ – Aras 2013-05-04 07:53:33

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

回答

相关问题