2

このフィドルを見てください: 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 要素のイベントを処理する適切な方法は何かということです。

4

1 に答える 1

1

フィドル コードの問題は、JSFiddle がコードを配置する方法にあります。

まず、Javascript は関数本体で評価されるため、メソッド transformMe はグローバル関数になりません。追加

window.transformMe = transformMe

関数がグローバルになるように、Javascriptの最後に。

次に、再びフィドルでコードが iframe で実行され (ページが異なる可能性があります)、「トップ」はトップ ドキュメントを参照します。jsfiddle.net の場合、クロスドメイン JS 呼び出しを実行しようとしています。開発者ツールをオンにしてフィドルを実行すると、これを確認できます。コンソールは正しいヒントを提供します。

最後になりましたが、現在のブラウザの実装では、「トップ」参照はまったく必要ないと思います。代わりに、単純にグローバル関数を呼び出すことができます (IE、Chrome、および FF でテストしたところ、うまくいきました)。

于 2013-05-02T06:31:28.050 に答える