SVG Ошибка: Доступ запрещен доступ к собственности «» SomeFunction

Question

Пожалуйста, обратите внимание на эту скрипку: http://jsfiddle.net/arasbm/Tyxea/14/

Как вы можете видеть, что я хочу, чтобы преобразовать SVG элементов, когда событие происходит на них. Вы можете нажать на стрелке, и он должен работать, потому что он использует код JavaScript, погруженный в области видимости SVG:

<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, я должен иметь возможность вызвать функцию 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 

Может кто-нибудь сказать мне, как решить эту проблему. Реальный вопрос, который у меня есть, демонстрируется в этом примере: Каков правильный способ обработки событий на элементах SVG с кодом JavaScript, который находится за пределами этих элементов?

Answer 1

Проблема в коде скрипта заключается в том, как JSFiddle упорядочивает ваш код.

Во-первых, Javascript оценивается в теле функции, и поэтому ваш метод transformMe не становится глобальной функцией. Добавить

window.transformMe = transformMe 

в конце вашего Javascript, чтобы эта функция стала глобальной.

Затем снова в скрипте код запускается в iframe (может быть, ваша страница отличается), а «верх» относится к верхнему документу, а в случае с jsfiddle.net вы пытаетесь сделать междоменный JS вызов. Вы можете увидеть это, если вы запустили скрипку с включенными инструментами разработчика: консоль дает правильные подсказки.

Последнее, но не менее важное значение в текущих реализациях браузера. Я не считаю, что вам нужна «верхняя» ссылка вообще. Вместо этого вы можете просто вызвать глобальные функции (просто протестируйте его с помощью IE, Chrome и FF и it worked for me).