Svg und Tasten

Question

Ich habe diese SVG auf der Weltkarte:

http://codepen.io/itailitai/pen/ZOpJWJ

und diese CSS:

.worldmap { 

    margin: 0 auto; 
    background-color:#091e2e; 

} 

Ich frage mich, kann ich die Kreise mit weißen Knopfdruck gefüllt machen?

Answer 1

Zum einen können Sie erheblich - und damit meine ich stark - vereinfachen Sie Ihre SVG durch das <circle> Element, zB.

<circle cx="20" cy="20" r="8" /> 

Es lohnt sich dies zu tun, weil die kubisch-Bezier-Pfade, die Sie derzeit haben (vermutlich von Ihrem Editor generiert) nicht genau Kreise - man kann nicht einen Kreis als Bezier-Kurve aus dem gleichen Grund darstellen kann man nicht Stellen Sie es als ein Polygon dar, es würde unendliche Seiten/Kurven benötigen.

Jetzt, da Ihr SVG etwa tausend Mal kleiner ist, können Sie tatsächlich damit arbeiten. Ihr Browser kann das auch, da er viele, viele Male schneller lädt und rendert, da er nicht mehr Tausende von Bezier-Kurven berechnen muss.

SVG-Elemente sind ... Elemente! Dies bedeutet, dass JavaScript und CSS mit ihnen arbeiten können.

ich eine sehr grobe Demo here gemacht haben, die wichtigen Bits sind:

[fill=white] { 
    cursor: pointer; 
} 

var white = document.querySelectorAll("[fill=white]"); 
var l = white.length, i; 
for(i=0; i<l; i++) { 
white[i].onclick = function() {alert(this.id);}; 
} 

Das sehr einfache Code gibt den weißen Kreisen den „Zeiger“ Cursor, und warnt ihre ID, wenn Sie klicke auf sie.

Je nach Ihren Bedürfnissen können Sie darauf aufbauen, wie Sie möchten.