Стиль SVG-круга с CSS

Ответ 1

В соответствии с спецификацией SVG 1.1 вы не можете стилить атрибут r круга SVG с помощью CSS https://www.w3.org/TR/SVG/styling.html#SVGStylingProperties. Но вы можете сделать:

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

В SVG 2, который частично поддерживается некоторыми современными браузерами, вы можете стилить атрибут r окружностей с помощью CSS. https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes

Ответ 2

Хотите использовать CSS? Используйте line вместо 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/

Ответ 3

Не уверен, что человек все еще ищет ответы, но для кого-либо еще это можно сделать в CSS (3), установив начало преобразования круга в центр.

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

}

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

Предостережение в CSS теперь связано с размерами, и мы должны знать точный центр круга в SVG.

Ответ 4

Как предложил Филлип в комментарии выше, вы можете сделать это с помощью преобразования CSS 3.

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

(префикс "- webkit" предназначен только для Chrome)

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

Здесь также показан рабочий пример с переходами CSS: http://jsbin.com/sozewiso/2

Ответ 5

Это должно сработать для вас.

jsfiddle

Вам нужно манипулировать радиусом, и это можно сделать только через 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);

    });
});

Ответ 6

Используйте это:

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

Демо здесь

Ответ 7

Я не уверен, но вы не можете полностью настроить svg только с помощью css. Однако, если вы это сделаете, это не будет перекрестный браузер. Раньше я использовал svg для создания сложной карты, и для меня решение было rapheljs.

EDIT:

Использование исчисления @phonicx для радиуса я изменило код, что-то, способное настраивать каждый круг (в случае, если у вас больше):

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

Ответ 8

У вас есть 2 круга, сделайте большую видимость: скрытой или отображаемой: нет. При зависании сделайте большую видимую и меньшую невидимую.

Ответ 9

Вы забыли цвет обводки:

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

Ответ 10

Я работал над чем-то другим и наткнулся на этот вопрос. Я делаю что-то подобное и использую greensock. Я анимировал масштаб на пару кругов, используя Greensock, GSAP. Мне нужно было оживить tranformOrigin и свойство scale:

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

Пример https://codepen.io/grmdgs/pen/RgjdPv

Greensock https://greensock.com/