icon - Estilo SVG círculo con CSS

svg responsive css

Question

Así que tengo mi círculo SVG.

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

Quiero que sea del 120% cuando se desplace el círculo. Probé ambos con ancho, alto y trazo. No he encontrado ninguna solución para hacer que el círculo sea más grande cuando se desplaza. ¿Alguna sugerencia?

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

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

Answer 1

¿Quieres usar solo CSS? Usa la line lugar del 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 2

Como Phillip sugirió en el comentario anterior, puedes hacer esto con la transformación CSS 3.

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

(El prefijo "-webkit" es solo para Chrome)

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

Aquí también hay un ejemplo de trabajo con transiciones CSS: http://jsbin.com/sozewiso/2

Answer 3

De acuerdo con la especificación SVG 1.1, no puede aplicar un estilo al atributo r de un círculo SVG utilizando CSS https://www.w3.org/TR/SVG/styling.html#SVGStylingProperties . Pero puedes hacer:

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

En SVG 2, que es parcialmente compatible con algunos navegadores modernos, puede diseñar el atributo r de los círculos usando CSS. https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes

Answer 4

Estaba trabajando en otra cosa y me encontré con esta pregunta. Estoy haciendo algo similar y usando greensock. Animé la escala en un par de círculos usando Greensock, GSAP. Necesitaba animar tranformOrigin y la propiedad de escala:

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

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

Greensock https://greensock.com/

Answer 5

Esto debería funcionar para usted.

jsfiddle

Necesita manipular el radio y esto solo se puede hacer a través de 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 6

No estoy seguro si la persona todavía está buscando las respuestas, pero para cualquier otra persona, se puede hacer en CSS (3), estableciendo el origen de transformación del círculo en su centro.

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

}

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

La advertencia de ser CSS ahora está unida a las dimensiones y debemos conocer el centro exacto del círculo en el SVG.

Answer 7

No estoy seguro, pero no se puede personalizar completamente un svg solo con css. Sin embargo, si lo haces no será cross browser. En el pasado usé svg para crear un mapa complejo y para mí la solución fue rapheljs .

EDITAR:

Usando el cálculo de @phonicx para el radio, modifiqué el código, teniendo something que puede personalizar cada círculo (en caso de que tenga más):

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

Olvidaste el color del trazo:

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

Answer 9

Utilizar esta :

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

Demo aquí