mr_sol: Move Elements in SVG D3

Beitrag lesen

SELF-Forum

Move Elements in SVG D3

mr_sol
– Informationen zu den Bewertungsregeln

Hallo!

Ich verwende D3 um use-Elemente im SVG Canvas mit der Maus zu verschieben. Leider klappt es nicht. Hat jemand eine Idee was hier falsch ist? Danke im Voraus

<html>  
<head>  
<meta charset="utf-8">  
<title>Test</title>  
  <script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script>  
  </head>  
  <body>  
  <style>  
  circle{  
    fill: #FF1100;  
    stroke: #00CCCC;  
 }  
  </style>  
<svg viewBox = "0 0 1000 1000"  
     xmlns="http://www.w3.org/2000/svg"  
     xmlns:xlink="http://www.w3.org/1999/xlink">  
    <defs>  
  
      <symbol id="test1">  
    <circle r="8" cy="8" cx="8">  
      </symbol>  
  
      <symbol id="test2">  
    <circle r="4" cy="8" cx="8">  
      </symbol>  
    </defs>  
  
      <use id="a20" x = "200" y = "150" xlink:href = "#test1"/>  
      <use id="a20" x = "200" y = "250" xlink:href = "#test2"/>  
  
  </svg>  
  
  <script type="text/javascript">  
  
  var element= null;  
  
  //****  
d3.selectAll("use")  
    .on("mousedown", function(){element=this;})  
    .on("mouseup", function(){element = null;});  
  
d3.selectAll("svg")  
     .on("mousemove", function(){ if (element!=null)  
    {  
     var mouse=d3.svg.mouse(this);  
     d3.select(this).attr("x", mouse[1]);  
     d3.select(this).attr("y", mouse[2]);  
     }});  
  
  </script>  
  </body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln