nicht angemeldet
svg-gruppenelement
hallo,
habe in svg ein ein gruppe:
<g id="zoomIn" onclick="action_ZoomIn(evt)" onmouseover="mo_ZoomIn(evt)">
<path id="34366760" style="fill:none;stroke:#1F1A17;stroke-width:13" d="M-416 1475l390 0 0 390 -390 0 0 -390z"/>
<path id="34366672" style="fill:none;stroke:#1F1A17;stroke-width:23" d="M-370 1672c0,-82 66,-148 147,-148 82,0 148,66 148,148 0,81 -66,147 -148,147 -81,0 -147,-66 -147,-147z"/>
<path id="34366584" style="fill:none;stroke:#1F1A17;stroke-width:47" d="M-327 1671l204 0"/>
<path id="34366496" style="fill:none;stroke:#1F1A17;stroke-width:47" d="M-225 1775l0 -204"/>
</g>
nun möchte ich allen elementen in dieser gruppe bei onmouseover eine andere farbe zuweisen. leider weiß ich nicht wie man auf diese elemente in der gruppe zugreift:
function mo_ZoomIn(e) {
var theTarget = e.getTarget();
var svgDoc = theTarget.getOwnerDocument();
...?
}
außerdem müßte man sie doch auch irgendwie zählen können:
aber wenn ich:
var theChilds = thTarget.hasChildNodes();
abfrage, sagt er mir, er hätte keine childs für dieses element?
wißt ihr einen rat?
micha
-
Hallo,
nun möchte ich allen elementen in dieser gruppe bei onmouseover eine andere farbe zuweisen. leider weiß ich nicht wie man auf diese elemente in der gruppe zugreift:
Eine mögliche Lösung:
Du könntest dir zwei Klassen mit den gewünschten eigenschaften für die Elemente definieren und beim onMouseover einfach die Klasse wechseln.
Aber wozu willst du sie zählen?Grüße
Thomas -
Hallo,
nun möchte ich allen elementen in dieser gruppe bei onmouseover eine andere farbe zuweisen. leider weiß ich nicht wie man auf diese elemente in der gruppe zugreift:
Der Zugriff auf alle childNodes der Gruppe nacheinander ist problematisch, weil auch die Zeilenumbrueche Kindknoten von g sind, aber keine Style-Objekte besitzen.
Man kann aber so ueber alle path-Elemente gehen:
var group = svgDoc.getElementById("zoomIn").getElementsByTagName("path");
for(var i=0;i<group.length;i++)
{
group.item(i).getStyle().setProperty("fill","#F00");
}oder einfacher nur die Farbe fuer die gesamte Gruppe setzen:
svgDoc.getElementById("zoomIn").getStyle().setProperty("fill","#F00");
Ich wuerde das in diesem Fall sogar ganz ohne Scripting loesen und die Animatinselemente von SVG bemuehen, hier ist set sinnvoll, siehe: http://www.datenverdrahten.de/svglbc/?code=g_animation.
MfG, Thomas
-
Hallo Thomas,
Ich wuerde das in diesem Fall sogar ganz ohne Scripting loesen und die Animatinselemente von SVG bemuehen,
Ich hatte irgednwo das Problem, dass es nicht ging, bzw. wenn man nur ein oder zwei Eigenschaften ändern will ist das noch ok, aber bei mehreren wird es viel. Ein Attribut "class" konnte ich so nicht ändern: z.B:
<text x="200" y="200" class="linkLink">Halloechen
<set attributeName="class" from="linkLink" to="linkHover" begin="mouseover" end="mouseout" />
</text>
(attributeType= war dabei egal)und auch beim <a> ging das leider nicht ohne Script. Alles mit dem SVG-Viewer 3.0 vom Adobe
Grüße
Thomas-
Hallo,
Ich hatte irgednwo das Problem, dass es nicht ging, bzw. wenn man nur ein oder zwei Eigenschaften ändern will ist das noch ok, aber bei mehreren wird es viel. Ein Attribut "class" konnte ich so nicht ändern: z.B:
<text x="200" y="200" class="linkLink">Halloechen
<set attributeName="class" from="linkLink" to="linkHover" begin="mouseover" end="mouseout" />
</text>
(attributeType= war dabei egal)und auch beim <a> ging das leider nicht ohne Script. Alles mit dem SVG-Viewer 3.0 vom Adobe
class- und style-Attribute lassen sich AFAIK nicht animieren, nur konkrete XML- bzw. CSS-Eigenschaften. Eine Google-Suche, speziell ueber die Dokumente des W3C nach attributeName="class bringt nur Hinweise auf Working Drafts vor der offiziellen SVG 1.0-Spezifikation.
Einen Hyperlink kann man so "hovern":
<a xlink:href="http://www.w3.org/Graphics/SVG/Overview.htm8" target="_top">
<text x="30" y="340" style="font-size: 18px; fill: #00C">Link zur SVG-Seite des W3C
<set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
<set attributeName="text-decoration" attributeType="CSS" to="underline" begin="mouseover"/>
<set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
<set attributeName="text-decoration" attributeType="CSS" to="none" begin="mouseout"/>
</text>
</a>Bei vielen Links wird das natuerlich eher zur Qual. Dann ist Scripting nuetzlich. Entweder Klassen mittels object.className oder setAttribute("class","klasse") tauschen oder einen Event-Listener setzen und dann alles mittels einer Funktion handeln, siehe z. B.: http://www.datenverdrahten.de/svglbc/?code=a.
MfG, Thomas
-
Hallo Thomas,
class- und style-Attribute lassen sich AFAIK nicht animieren, nur konkrete XML- bzw. CSS-Eigenschaften. Eine Google-Suche, speziell ueber die Dokumente des W3C nach attributeName="class bringt nur Hinweise auf Working Drafts vor der offiziellen SVG 1.0-Spezifikation.
also die SVG 1.0 Spez sagt was anderes bei class="": http://www.w3.org/TR/SVG/styling.html#ClassAttribute
(Animatable: yes.)Einen Hyperlink kann man so "hovern":
Bei vielen Links wird das natuerlich eher zur Qual. Dann ist Scripting nuetzlich.Ja, eben ;-) oder :-(
Grüße
Thomas-
Hallo,
also die SVG 1.0 Spez sagt was anderes bei class="": http://www.w3.org/TR/SVG/styling.html#ClassAttribute
(Animatable: yes.)Beispiele und noch dazu funktionierende Beispiele bringt die Spezifikation dazu aber nicht.
MfG, Thomas
-
-
-
-
-
Hallo,
aber wenn ich:
var theChilds = thTarget.hasChildNodes();
abfrage, sagt er mir, er hätte keine childs für dieses element?
Das soll offenbar theTarget... lauten. Mache Dir mal klar, dass die Methode getTarget() als Ziel das Element liefert, von dem aus das Ereignis ausgeloest wurde.
Beim Klicken auf einen Pfad ist es das zugehoerige path-Element, das g-Element der umgebenden Gruppe ist aber das Parent-Element von diesem path.
Gib mal so etwas aus:
alert(e.getTarget().getTagName());
bzw.
alert(e.getTarget().getParentNode().getTagName());e.getTarget().getParentNode().getStyle().setProperty("eigenschaft","wert") waere moeglich, wobei die Referenzierung ueber getElementById() bei komplexeren Grafiken einfacher ist (siehe meine andere Antwort).
MfG, Thomas
-
okay... hat funktioniert vielen dank.
micha