Stile SVG circle con CSS

Question

Quindi ho il mio cerchio SVG.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <circle cx="168" cy="179" r="59" fill="white" /> 
</svg> 

Voglio che sia del 120% quando si passa il cerchio. Ho provato entrambi con larghezza, altezza e corsa. Non ho trovato alcuna soluzione per rendere il cerchio più grande quando si libra. Eventuali suggerimenti?

circle:hover 
    { 
    stroke-width:10px; 
    } 

circle:hover 
    { 
    height: 120%; 
    width: 120%; 
    } 

Answer 1

Come per la specifica SVG 1.1 non è possibile lo stile l'attributo r di un cerchio SVG usando i CSS https://www.w3.org/TR/SVG/styling.html#SVGStylingProperties. Ma si può fare:

<circle cx="168" cy="179" r="59" 
     fill="white" stroke="black" 
     onmouseover="evt.target.setAttribute('r', '72');" 
     onmouseout="evt.target.setAttribute('r', '59');"/> 

In SVG 2, che è parzialmente supportato da alcuni browser moderni, questo stile l'attributo r dei cerchi usando i CSS. https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes

Answer 2

Non sono sicuro, ma non è possibile personalizzare completamente uno svg solo con css. Tuttavia, se lo farai non sarà cross browser. In passato ho usato svg per creare una mappa complessa e per me la soluzione era rapheljs.

EDIT:

Utilizzando calcolo @phonicx per il raggio Ho modificato il codice, avendo something che è in grado di personalizzare ogni cerchio (nel caso in cui se si dispone di più):

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <circle data-precentage='100' cx="168" cy="179" r="59" fill="red" /> 
    <circle data-precentage='120' cx="74" cy="100" r="59" fill="black" /> 
</svg> 

Answer 3

Questo dovrebbe Lavoro per te.

jsfiddle

È necessario manipolare il raggio e questo può essere fatto solo tramite javascript:

$(function() { 
    $("svg circle").on("mouseenter", function() { 

     var oldR = $(this).attr("r"); 

     var newR = (((oldR*2)/100)*120)/2; // 120% width 

     $(this).attr("r", newR); 

    }); 
}); 

Answer 4

hanno 2 cerchi, rendere il più grande visibility: hidden oppure display: none. Al passaggio del mouse, rendere il più grande visibile e il più piccolo invisibile.

Answer 5

Utilizzare questa:

$(function() { 
$('circle').hover(function() { 
$(this).attr('r',100); 
},function(){ 
$(this).attr('r',59); 
}); 
}); 

Demo Here

Answer 6

Vuoi utilizzare solo CSS? Utilizzare line anziché circle.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <style> 
    .circle { 
     stroke-width: 59; 
     stroke-linecap: round; 
    } 
    .circle:hover { 
     stroke-width: 71; 
    } 
    </style> 
    <line x1="168" y1="179" x2="168" y2="179" stroke="white" class="circle" /> 
</svg> 

http://jsfiddle.net/rLk7rd8b/

Answer 7

Come Phillip suggerito nel commento di cui sopra si può fare questo con i CSS 3 trasformare.

circle:hover { 
    -webkit-transform: scale(x, y); 
    } 

(prefisso "-webkit" è per Chrome solo)

Vedi https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Ecco un esempio di lavoro con le transizioni CSS troppo: http://jsbin.com/sozewiso/2

Answer 8

hai dimenticato il colore del tratto:

circle:hover { 
    stroke:white; 
    stroke-width:10px; 
} 

Answer 9

Non so se il perso n sta ancora cercando le risposte, ma per chiunque altro, può essere fatto in CSS (3), impostando l'origine della trasformazione del cerchio al suo centro.

circle { 
    transform-origin: 168px 179px; 
    transform: scale(1,1); 

}

circle:hover 
{ 
stroke-width:10px; 
transform:scale(1.2,1.2); 
} 

L'avvertimento essendo CSS è ora accoppiato con dimensioni e dobbiamo conoscere il centro esatto del cerchio nel SVG.

Answer 10

Stavo lavorando su qualcos'altro e ho trovato questa domanda. Sto facendo qualcosa di simile e sto usando greensock. Ho animato la scala su un paio di cerchi usando Greensock, GSAP. Avevo bisogno di animare tranformOrigin e la proprietà di scala:

TweenMax.staggerFrom(".circle",1,{scale:0,transformOrigin:"50% 50%",ease:Bounce.easeOut}, .08); 

Esempio https://codepen.io/grmdgs/pen/RgjdPv

Greensock https://greensock.com/