SVG polygon farbe in javascript nach Eventereignis verändern

[effel]

Hallo,

Problem in SVG: Ich habe mehrer Polygon gezeichnet und mit CSS stroke-width:3;stroke:blue; die Randbreite und die Farbe festgelegt. In Javascript habe ich allen mit: document.getElementsByTagName("polygon")[z0].addEventListener('mouseover', () => farbe()); ein Ereignis zugeordnet. wenn ich über die Polygonlinie fahre, wird die function farbe aufgerufen - bis hierher alles ok Mein Frage: Wie greife ich auf das angerührte Polygon zu und verändere die Farbe,ggf auch die Randbreite? hat nicht funktioniert:

function farbe(){
this.strokeStyle="red"
   }

mit freundl. Grüßen
Effel

[Rolf B]

Hallo effel,

muss es JavaScript sein? Kann man das nicht per CSS über die Pseudoklasse :hover lösen?

Im JavaScript frage ich mich, wie du auf strokeStyle kommst. Ich mache das nicht so oft mit svg, bin aber sicher, dass die Eigenschaft stroke heißen sollte. Oder Du solltest mit der setAttribute Methode arbeiten.

Ist dieses svg eigenständig oder ist es ein svg Element, das in html eingebettet ist?

Rolf

[Matthias Scharwies]

Servus!

Hallo effel,

muss es JavaScript sein? Kann man das nicht per CSS über die Pseudoklasse :hover lösen?

Ja.

SVG/Tutorials/Einstieg/SVG_mit_CSS_stylen

→ Beispiel

Herzliche Grüße

Matthias Scharwies

[ThomasM]

Hallo Effel,

Mein Frage: Wie greife ich auf das angerührte Polygon zu und verändere die Farbe,ggf auch die Randbreite? hat nicht funktioniert:

function farbe(){
this.strokeStyle="red"
   }

this.setAttribute("stroke", "red");
this.setAttribute("stroke-width", "5");

oder via CSS:

polygon:hover
{
  stroke: red;
  stroke-width: 5;  
}

Grüße,
Thomas

[effel]

so hat es funktioniert:

Festlegen des Ereignisses für alle Polygons:

document.getElementsByTagName("polygon")[z0].addEventListener('mouseover',farbe);

Mit der Maus darüber fahren:

function farbe(){ this.style.stroke = "red" this.style.strokeWidth = "15" }

Danke an alle, die mir geholfen haben !!

[Rolf B]

Hallo effel,

weshalb hast Du CSS und :hover verworfen?

Rolf

[Gunnar Bittersmann]

@@Rolf B

weshalb hast Du CSS und :hover verworfen?

Die Frage kann man aber an die anderen hier stellen: Weshalb wurden überhaupt Antworten mit JavaScript gegeben?

Wenn man den Noobs Unsinn erzählt, dann werden sie den machen.

Kwakoni Yiquan

[Rolf B]

Hallo Gunnar,

Weshalb wurden überhaupt Antworten mit JavaScript gegeben?

Weil die^[1] TO danach gefragt und unseren Tipp mit :hover komplett ignoriert hat.

Noob

Ihre bisherigen Fragen kamen aus den Node.js Umfeld, d.h. in JS ist sie definitiv kein Noob. Und da möchte sie vielleicht bei einem vertrauten Werkzeug bleiben. Schade, dass sie die Rückfragen nicht beantwortet hat.

Rolf

---

1. Keine Ahnung, ob effel m/w/d/n ist. Ich verwende mal ein generisches Femininum ↩︎

[Rolf B]

Hallo effel,

this.strokeStyle="red"

so, jetzt weiß ich, wo das her ist: das ist aus dem Canvas 2D-Kontext. Aber SVG Elemente haben das nicht.

Eine explizite Eigenschaft "stroke" finde ich am SVGPolygonElement und seinen Elternelementen nicht.

Entweder verwende this.setAttribute("stroke", "red"), um das SVG-Attribut zu ändern, oder this.style.stroke = "red", um es mit einer CSS-Eigenschaft zu überschreiben.

Oder besser noch - wie gesagt - verwende gleich CSS und die :hover Klasse.

Rolf