SVG polygon farbe in javascript nach Eventereignis verändern
effel
- css
- javascript
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
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
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
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
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 !!
Hallo effel,
weshalb hast Du CSS und :hover verworfen?
Rolf
@@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
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
Keine Ahnung, ob effel m/w/d/n ist. Ich verwende mal ein generisches Femininum ↩︎
@@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
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
@@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
Weil ich gerade unterwegs bin
Morgens mit Shantys geweckt zu werden – @Linuchs hätte seine Freude dran.
Kwakoni Yiquan
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