[SVG/ecmascript] onmousemove werkt niet correct

[JeromeB]

Ik ben wat dingetjes aan het proberen met ecmascript in SVG.

Nu wil ik een bolletje laten bewegen met mijn muis, maar dat geeft problemen.
- Het bolletje werkt alleen als ik de muis op het bolletje heb staan, maar inprincipe moet het bolletje ook werken als ik mijn muis over de pagina beweeg.
- Als ik de muis op het bolletje zet dan werkt het bolletje eindelijk, maar ga ik iets te snel met de muis dan gaat cursor van het bolletje en blijft het bolletje op zijn plek staan.

Ik denk dat het probleem te maken heeft met de 'evt' en de onmousemove, maar het lukt mij niet om het optelossen.

code:

<?xml version="1.0" standalone="yes" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" onmousemove="bloeb(evt,'bolletje')">

<script type="text/ecmascript">

    function bloeb(evt,it)
    {
        var ti = svgDocument.getElementById(it);
        var x = evt.getClientX();
        var y = evt.getClientY();
        ti.setAttribute ("cx", x);
        ti.setAttribute ("cy", y);
    }

</script>

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" id="bolletje" />

</svg>

[Verwijderd]

(Je mist een NAMESPACE. Daarnaast, wil je dit laten werken in een huidige Mozilla, moet je html|script gebruiken en niet svg|script. In dat geval mis je 2 NAMESPACES.)

[JeromeB]

Ik heb deze namespace toegevoegd, maar dat verhelpt mijn probleem niet (zoals ik al dacht).

code:

<svg width="100%" height="100%"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" onmousemove="blub(evt,'bolletje')">

Wat bedoel je verder met html|script en svg|script?

[JeromeB]

Ik heb het maar zo opgelost:

code:

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

    <script type="text/ecmascript">
    <![CDATA[
    
        function mousepointer(evt)
        {
            var x = evt.getClientX();
            var y = evt.getClientY();
            ti = svgDocument.getElementById('bol');
            ti.setAttribute ("cx", x);
            ti.setAttribute ("cy", y);
        }   

    ]]>
    </script>
    
    <rect height="100%" width="100%" fill="black" onmousemove="mousepointer(evt)" />
    <circle id="bol" cx="40" cy="40" r="20" fill="red" stroke="darkred" stroke-width="10" fill-opacity="0.5" />



</svg>

Toch vind ik het best raar dat het onmousemove niet correct werkt op het svg element. Het lijkt net alsof het de canvas niet volledig vult.

[Verwijderd]

Die wordt wel gevuld, maar het lijkt er een beetje op dat de canvas 'transparant' is voor events. Mwah, raar hoor, maar zoals je zelf al hebt bedacht, rechthoek erachter pleuren en hij werkt wel.
onmousemove werkt dan ook op het svg element.
En dat werkt ook beter dan op het rect element, want events hebben de neiging te 'bubbelen' zodat onmousemove op een circle ook het svg element bereikt, maar niet de rect, want deze omvat de circle niet.
Daardoor is je huidige oplossing een beetje 'horkerig'.

[JeromeB]

ok, iig bedankt.


Zijn hier verder eigenlijk nog liefhebbers van SVG of mensen die er mee gewerkt hebben?

[F97]

JeromeB schreef op 26 maart 2004 @ 18:18:
ok, iig bedankt.


Zijn hier verder eigenlijk nog liefhebbers van SVG of mensen die er mee gewerkt hebben?

Mjah, ik heb er net iets over gelezen in "Designing CSS web pages" van C. Schmitt maar verder ...

Het lijkt wel een kewle technologie maar denk dat het nog even duurt voor die echt zal doorbreken. Met XML enzo (waar ik ook al amper iets van weet dus zal ik ook maar geen toekomstvoorspellingen doen :-)).

(Is er trouwens nergens op internet een goeie bron om wat te lezen over SVG? Ik bedoel dan simpele en goeie artikels (of weet ik veel - zonder dat ik dertig pagina's moet lezen) die je zelf kan aanraden?)

[ Voor 9% gewijzigd door F97 op 27-03-2004 14:30 ]

[JeromeB]

Tja. Ik vind het vooral jammer dat het nog niet goed wordt ondersteund enzo.

Het is verder ook niet echt geschikt om informatie-sites mee te gaan maken.

op W3Schools staan wel wat simpele dingen uitgelegt, maar de informatie is wel beperkt: http://www.w3schools.com/svg/default.asp

Hier staat ook nog wat leuke informatie: http://www.learnsvg.com

[ Voor 12% gewijzigd door JeromeB op 27-03-2004 16:37 ]

[F97]

JeromeB schreef op 27 maart 2004 @ 16:36:
Tja. Ik vind het vooral jammer dat het nog niet goed wordt ondersteund enzo.

Het is verder ook niet echt geschikt om informatie-sites mee te gaan maken.

op W3Schools staan wel wat simpele dingen uitgelegt, maar de informatie is wel beperkt: http://www.w3schools.com/svg/default.asp

Hier staat ook nog wat leuke informatie: http://www.learnsvg.com

W3Schools, dat ik daar niet zelf aangedacht had. Thanks. Het ligt soms voor je neus ... Bedankt voor beide links.

Feit is dat het nooit door héél veel mensen zal gebruikt worden omdat de toepassing ervan natuurlijk zeer typisch is. Ikzelf heb eigenlijk nog nooit SVG nodig gehad om iets te maken, maar dat kan ook zijn omdat ik nog te weinig weet wat er mee kan gedaan worden. Ik ben er wel in geinteresseerd, in de toekomst kan ik het nog nodig hebben. Je weet nooit.

[Verwijderd]

Als Mozilla SVG als standaard meegeleverde feature heeft, ga ik zeker SVG gebruiken (wellicht een soort schaalbare layout (een echte, niet zo wit als deze) voor m'n weblog maken; was ik al van plan namelijk, maar toen werd het niet ondersteund en ging het niet door).

Ik heb laatst wel een build gedownload waar het wel ondersteund wel. Bepaalde (belangrijke) elementen, zoals SCRIPT en STYLE zijn echter nog niet ondersteund. Vandaar ook dat ik zei dat je de XHTML versie van SCRIPT moest gebruiken (SCRIPT in de XHTML NS, niet in de SVG) als je het in Mozilla wilde laten werken .

Het meest interessante aan het grahpics formaat is zeker het XML aspect. Ik heb nog geen SVG boekje (ik wil die van O'reilly gaan kopen, maar er zijn nog zat andere boeken die ik ook wil hebben ), maar in m'n XSLT boek stond wel een leuk voorbeeldje. Ze hadden een "hello world" XML document gecreeerd en maakten daar door middel van XSLT achtereenvolgens een HTML, PDF, SVG en VRML bestand van (dit was het leuke van XSLT). In XML was er een soort DB aangemaakt met statistische gegevens. Vervolgens lieten ze hier een XSLT documentje overheen gaan en daaruit kwam een perfecte cirkeldiagram (volledig met diepte, etc.).

[JeromeB]

Ik heb een PDF Boekje SVG Essentials (13,3 MB 304 blz). Daar staan best interessante dingen in.

Ik weet eigenlijk niet of ik deze link mag plaatsen, maarja: ftp://194.85.35.67/BOOKS/.