SVG/ Javascript
Aus Wikibooks
< SVG
In diesem Kapitel werden die Grundlagen von Javascript vorausgesetzt.
[Bearbeiten] <script>
In einem SVG werden Skripte wie bei HTML mit dem script-Element entweder eingebettet wie hier:
<script type="text/ecmascript"> Hier könnte ihr Programm stehen <script>
oder es wird auf ein externes Dokument verwiesen
<script type="text/ecmascript" xlink:href="scripts/meinScript.js"/>
[Bearbeiten] drag 'n' drop
<?xml version="1.0"?> <svg width="600px" height="400px" xmlns="http://www.w3.org/2000/svg"> <script> <![CDATA[ function dnd(evt) { ziel = evt.target dx = ziel.cx.baseVal.value - evt.clientX; dy = ziel.cy.baseVal.value - evt.clientY; document.addEventListener("mousemove", mousemove_listener, true); document.addEventListener("mouseup", mouseup_listener, true); } function mouseup_listener(evt) { document.removeEventListener("mousemove", mousemove_listener, true); document.removeEventListener("mouseup", mouseup_listener, true); } function mousemove_listener(evt) { var id = ziel.ownerSVGElement.suspendRedraw(1000); ziel.cx.baseVal.value = evt.clientX + dx; ziel.cy.baseVal.value = evt.clientY + dy; ziel.ownerSVGElement.unsuspendRedraw(id); } ]]> </script> <polyline points="0,0 600,0 600,400 0,400 0,0" style="stroke:black; fill:DarkOrange;"/> <circle id="circ" r="1cm" cx="5cm" cy="3cm" style="fill:SkyBlue; stroke:PaleTurquoise; stroke-width:5;" onmousedown="dnd(evt)"/> <circle id="circ2" r="2cm" cx="3cm" cy="4cm" style="fill:Linen; stroke:SandyBrown; stroke-width:5;fill-opacity:0.5;" onmousedown="dnd(evt)"/> </svg>
