nicht angemeldet
fadein/out opacity in svg
servus,
ich versuche schon geraume zeit, ein javascript zu schreiben, welches folgendes erledigt:
im augenblick habe ich arrays, die IDs bestimmter Pfade enthalten. ich möchte nun, daß ich, sobald der mauszeiger über einen dieser pfade kommt (sind geschlossen, also flächen), alle flächen dieses arrays ein und ausfaden... also periodisch ein - aus - ein - aus ... bis der mauszeiger wieder runtergeht.
anstatt jedesmal das array durchzugehen würde es mir auch reichen, wenn man einfach die opacity der gruppe, die die jeweiligen (in einem array zusammengefassten) pfade enthält, verändert, nur konnte ich die gruppe bisher nicht richtig im DOM Baum ansteuern.
am anfang steht die opacity der gruppe auf 0 bzw. die fill-opacity der pfade jedes arrays stehen auf 0.
ich hoffe es war einigermaßen verständlich ;)
Danke, Stefan
-
Hallo,
anstatt jedesmal das array durchzugehen würde es mir auch reichen, wenn man einfach die opacity der gruppe, die die jeweiligen (in einem array zusammengefassten) pfade enthält, verändert, nur konnte ich die gruppe bisher nicht richtig im DOM Baum ansteuern.
am anfang steht die opacity der gruppe auf 0 bzw. die fill-opacity der pfade jedes arrays stehen auf 0.
Das sollte doch im Prinzip in diese Richtung gehen: http://www.datenverdrahten.de/svglbc/?code=g_animation. Hier animiere ich eine Gruppe von Grundformen (rect, circle, polygon) mit den SVG-eigenen Aimationselementen. Dabei werden jeweils die Eigenschaften stroke und stroke-width veraendert. Man koennte hier natuerlich auch den opacity-Wert aendern.
Mittels JavaScript waere das analog zu machen: http://www.datenverdrahten.de/svglbc/?code=svgdomscripting. Der Link "Rechtecke: fill-opacity: 0.4" aendert via DOM den opacity-Wert der gruppierten Rechtecke.
MfG, Thomas
-
[Nachtrag:]
Man koennte hier natuerlich auch den opacity-Wert aendern.
Ein Beispiel fuer opacity-Rollovers habe ich auch noch: http://www.datenverdrahten.de/svglbc/?code=opacity-rollovers. Bei Bedarf einfach die betreffende Objektgruppe statt einemm einzelnen Element animieren.
MfG, Thomas
-
Danke erstmal, trifft's aber noch nicht ganz. Ein einfaches fade-in ist mir klar, ich möchte aber, daß die opacity immer ein-und ausfadet während der Mauszeiger über dem Objekt ist, sozusagen ein pulsieren. In HTML kann ich das mit Javascript machen... nur wenn ich den Code im SVG benutze bekommen ich immer "nicht genügend Arbeitsspeicher" etc.
[Nachtrag:]
Man koennte hier natuerlich auch den opacity-Wert aendern.
Ein Beispiel fuer opacity-Rollovers habe ich auch noch: http://www.datenverdrahten.de/svglbc/?code=opacity-rollovers. Bei Bedarf einfach die betreffende Objektgruppe statt einemm einzelnen Element animieren.
MfG, Thomas
-
Hallo,
Danke erstmal, trifft's aber noch nicht ganz. Ein einfaches fade-in ist mir klar, ich möchte aber, daß die opacity immer ein-und ausfadet während der Mauszeiger über dem Objekt ist, sozusagen ein pulsieren. In HTML kann ich das mit Javascript machen... nur wenn ich den Code im SVG benutze bekommen ich immer "nicht genügend Arbeitsspeicher" etc.
Probiere mal diese Script-freie Version aus:
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg>
<g>
<circle cx="100" cy="100" r="30" style="fill: #F00"/>
<circle cx="170" cy="100" r="30" style="fill: #090"/>
<circle cx="240" cy="100" r="30" style="fill: #00C"/><animate attributeName="opacity" attributeType="CSS" from="1.0" to="0.0"
begin="mouseover" dur="3s" fill="freeze" repeatCount="indefinite"/>
<set attributeName="opacity" attributeType="CSS" to="1.0"
begin="mouseout" fill="freeze"/>
</g></svg>
MfG, Thomas
-
Hallo,
Danke erstmal, trifft's aber noch nicht ganz. Ein einfaches fade-in ist mir klar, ich möchte aber, daß die opacity immer ein-und ausfadet während der Mauszeiger über dem Objekt ist, sozusagen ein pulsieren.
Hier noch eine weitere (etwas schnellere) Version mit opacity-Fading 1.0 --> 0.0 --> 1.0 usw.:
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg>
<g>
<circle cx="100" cy="100" r="30" style="fill: #F00"/>
<circle cx="170" cy="100" r="30" style="fill: #090"/>
<circle cx="240" cy="100" r="30" style="fill: #00C"/><animate id="einsnull" attributeName="opacity" attributeType="CSS" from="1.0" to="0.0"
begin="mouseover;nulleins.end" dur="1s" fill="freeze"/>
<animate id="nulleins" attributeName="opacity" attributeType="CSS" from="0.0" to="1.0"
begin="einsnull.end" dur="1s" fill="freeze"/>
<set attributeName="opacity" attributeType="CSS" to="1.0"
begin="mouseout" fill="freeze"/>
</g></svg>
MfG, Thomas
-
-
-