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 ↩︎

[Gunnar Bittersmann]

@@Rolf B

Weshalb wurden überhaupt Antworten mit JavaScript gegeben?

Weil die TO danach gefragt und unseren Tipp mit :hover komplett ignoriert hat.

Das ist Unsinn. Wenn jemand fragt „Wie kriege ich mit einem Hammer eine Schraube in die Wand?“, dann ist die richtige Antort nicht „Du musst nur doll genug draufhauen, dann geht das schon.“

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.

„Hammer ist das einzige Werkzeug, das ich kenne. Also muss es auch damit gehen, die Schaube in die Wand zu kriegen.“ Unsinn!

JavaScript ist für diesen Zweck das falsche Werkzeug. Das hätte man deutlich sagen müssen, nicht eine Anleitung zur Verwendung des falschen Werkzeugs geben.

JavaScript-Entwickler, die von den Grundlagen des Webs – HTML und CSS – keine Ahnung haben, gibt es schon viel zu viele. Sorgen wir nicht noch dafür, dass es mehr werden; sondern dafür, dass es weiniger werden!

Schade, dass sie die Rückfragen nicht beantwortet hat.

Das kennen wir doch. Darum ist es ja wichtig, gleich sinnvolle Antworten zu geben und nicht so einen Quatsch zu schreiben wie in diesem Thread geschehen.

Kwakoni Yiquan

[Rolf B]

Hallo Gunnar,

Darum ist es ja wichtig, gleich sinnvolle Antworten zu geben

Thomas und ich haben auf :hover hingewiesen und es die bessere Lösung genannt.

Wenn Dir das so wichtig war, warum hast Du es nicht vor 3 Tagen geschrieben, statt jetzt nachzukarten, wo effel mutmaßlich nicht mehr mitliest?

Rolf

[Gunnar Bittersmann]

@@Rolf B

Thomas und ich haben auf :hover hingewiesen und es die bessere Lösung genannt.

Ihr hättet es auch die einzige Lösung nennen und den JavaScript-Teil weglassen können.

Oder die Gründe anführen, warum man das nicht mit JavaScript machen sollte.

Wenn Dir das so wichtig war, warum hast Du es nicht vor 3 Tagen geschrieben, statt jetzt nachzukarten, wo effel mutmaßlich nicht mehr mitliest?

Weil ich gerade unterwegs bin und nur gelegentlich hier mitlese.

Kwakoni Yiquan

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Weil ich gerade unterwegs bin

Morgens mit Shantys geweckt zu werden – @Linuchs hätte seine Freude dran.

Kwakoni Yiquan

[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