0

svg で四角形をドラッグするコードを記述した小さなプログラムを作成してみました。プログラムは非常に単純です。私の問題は、四角形が Web ページ全体ではなく、画面上でのみ診断的にドラッグされることです。

これが私のコードです..

<?xml version="1.0"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="100%" height="100%"
 onload="Init( evt )" >

<script type="text/ecmascript">
   //<![CDATA[
var svgDocument;
var svgRoot;
var newP;
var bmousedown=0;
var myCirc;

function Init(evt){

svgRoot= document.getElementsByTagName("svg")[0];


   newP = svgRoot.createSVGPoint();
   myCirc = document.getElementById("mycirc");
   }

function getMouse(evt){
   var position = svgRoot.createSVGPoint();
   position.x = evt.clientX;
   position.y = evt.clientY;
   return position;
   }

function onMouseDown(evt){
   bmousedown=1;
   newP=getMouse(evt);
   doUpdate();
   }

function onMouseMove(evt){
   if(bmousedown){
       newP=getMouse(evt);
       doUpdate();
       }
   }

function onMouseUp(evt){
   bmousedown=0;
   }

function doUpdate(){
   myCirc.setAttributeNS(null, "x", newP.x );
   myCirc.setAttributeNS(null, "y", newP.y );
   }

// ]]></script>


<rect id="mycirc" fill: #bbeeff" x="0" y="0" width="80" height="80"

   pointer-events="visible"
   onmousedown="onMouseDown(evt)"
   onmousemove="onMouseMove(evt)"
   onmouseup="onMouseUp(evt)"/>

</svg>

画面全体で動かない理由が分からないので教えてください。

4

2 に答える 2

0

これが正しい解決策です：http://jsfiddle.net/mihaifm/5GHJs/

あなたが犯したと思う間違い：

  • onload="Init( evt )" 変数をevtグローバルにします。これは、悪くて役に立たないものです。すべての関数もグローバルですが、この例ではこれで問題ありません。
  • などの関数呼び出しは、onmousedownこの global を使用していましevtた。（違う）。呼び出しごとに正しいイベントを取得するには、いくつかのハンドラーを登録する必要があります。
于 2012-04-15T15:55:49.360 に答える
0

Firefox で問題が再現されているのがわかりますが、それは 1 つの問題ではなく、コードがいたるところにあります。特定の質問を投稿する前に、設計図に戻ることをお勧めします。

また、SVGまたはJS ベクトル グラフィックス ライブラリの使用に関する優れたリファレンスもお勧めします。

于 2012-04-14T18:47:52.337 に答える