web-dev-qa-db-fra.com

Style de cercle SVG avec CSS

J'ai donc mon cercle SVG.

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

Je veux que ce soit 120% quand on survole le cercle. J'ai essayé les deux avec largeur, hauteur et course. Je n'ai trouvé aucune solution pour agrandir le cercle en vol stationnaire. Aucune suggestion?

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

circle:hover
  {
    height: 120%;
    width: 120%;
  }
csssvghovergeometry
19
Sebastian

Selon la spécification SVG 1.1, vous ne pouvez pas styliser l'attribut r d'un cercle SVG à l'aide de CSS https://www.w3.org/TR/SVG/styling.html#SVGStylingProperties =. Mais vous pouvez faire:

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

Dans SVG 2, qui est partiellement pris en charge par certains navigateurs modernes, vous pouvez styliser l'attribut r des cercles à l'aide de CSS. https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes

28
Peter Collingridge

Vous souhaitez utiliser uniquement CSS? Utilisez line au lieu de 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/

26
interestinglythere

Je ne sais pas si la personne cherche toujours les réponses, mais pour quelqu'un d'autre, cela peut être fait en CSS (3), en définissant l'origine de la transformation du cercle à son centre.

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

}

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

La mise en garde étant CSS est maintenant couplée avec des dimensions et nous devons connaître le centre exact du cercle dans le SVG.

17
Anshul

Comme Phillip l'a suggéré dans le commentaire ci-dessus, vous pouvez le faire avec CSS 3 transform.

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

(Le préfixe "-webkit" est pour Chrome uniquement))

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

Voici également un exemple de travail avec les transitions CSS: http://jsbin.com/sozewiso/2

5
Jonathan Sewell

Cela devrait fonctionner pour vous.

jsfiddle

Vous devez manipuler le rayon et cela ne peut être fait que via 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);

    });
});
1
phonicx

Utilisez ceci :

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

Démo ici

1
Milind Anantwar

Je travaillais sur autre chose et suis tombé sur cette question. Je fais quelque chose de similaire et j'utilise greensock. J'ai animé l'échelle sur quelques cercles en utilisant Greensock, GSAP. J'avais besoin d'animer tranformOrigin et la propriété scale:

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

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

Greensock https://greensock.com/

0
grmdgs

Je ne suis pas sûr, mais vous ne pouvez pas entièrement personnaliser un svg uniquement avec css. Cependant, si vous le faites, ce ne sera pas un navigateur croisé. Dans le passé, j'utilisais svg pour créer une carte complexe et pour moi la solution était rapheljs .

MODIFIER:

En utilisant le calcul @phonicx pour le rayon, j'ai modifié le code, ayant quelque chose qui est capable de personnaliser chaque cercle (au cas où vous en auriez plus):

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

Vous avez oublié la couleur du trait:

circle:hover {
    stroke:white;
    stroke-width:10px;
 }
0
Miguel Alejandro Fuentes Lopez