Styl koła SVG z CSS

Question

Mam więc swoje koło SVG.

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

Chcę, aby było 120%, gdy jeden najechanie koła. Próbowałem zarówno szerokości, wysokości i skoku. Nie znalazłem żadnego rozwiązania, które spowodowałoby zwiększenie koła po zawieszeniu. Jakieś sugestie?

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

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

Answer 1

Jak na SVG 1.1 specyfikacji nie można projektować atrybut z kręgu SVG przy użyciu CSS https://www.w3.org/TR/SVG/styling.html#SVGStylingPropertiesr. Ale można zrobić:

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

W SVG 2, który jest częściowo wspierany przez niektórych nowoczesnych przeglądarkach, można projektować atrybut kręgów za pomocą CSS r. https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes

Answer 2

Nie jestem pewien, ale nie można w pełni spersonalizować svg tylko przy pomocy css. Jeśli jednak to zrobisz, nie będzie to przeglądarka. W przeszłości używałem svg do tworzenia złożonej mapy, a dla mnie rozwiązaniem było rapheljs.

EDIT:

Korzystanie @phonicx rachunku dla promienia i zmodyfikowanego kodu, mający something, która jest w stanie dostosować każdy okrąg (w przypadku, gdy masz więcej):

<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

Powinno to praca dla Ciebie.

jsfiddle

trzeba manipulować promień i można to zrobić tylko za pośrednictwem 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

posiadają 2 kółka sprawiają, że większy widoczność: ukryte lub display: none. Po najechaniu spraw, aby większy był widoczny, a mniejszy niewidoczny.

Answer 5

Użyj tego:

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

Demo Here

Answer 6

Chcesz używać tylko CSS? Użyj line zamiast 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

Jak Phillip sugerowane w komentarzu powyżej można to zrobić z CSS 3 przekształcać.

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

("-webkit" prefix jest dla Chrome tylko)

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

Oto przykład pracy z przejściami CSS też: http://jsbin.com/sozewiso/2

Answer 8

Zapomniałaś kolor obrysu:

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

Answer 9

Nie jestem pewien, czy osoba n wciąż szuka odpowiedzi, ale dla kogokolwiek innego można to zrobić w CSS (3), ustawiając początek transformacji koła na jego środek.

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

}

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

Zastrzeżenie jest CSS jest teraz w połączeniu z wymiarami i musimy znać dokładny środek okręgu w SVG.

Answer 10

Pracowałem nad czymś innym i natknąłem się na to pytanie. Robię coś podobnego i używam greensock. Animowałem skalę w kilku kręgach przy użyciu Greensock, GSAP. Musiałem animować tranformOrigin i właściwość skalę:

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

Przykład https://codepen.io/grmdgs/pen/RgjdPv

Greensock https://greensock.com/