このフィドルを見てください: 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>
SVG
これは機能しますが、JavaScript コードを要素から分離したいと考えています。この W3C ドキュメントによると、スコープを使用して参照することで、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 コードを使用して SVG 要素のイベントを処理する適切な方法は何かということです。