使用 CSS 设置 SVG 圆的样式

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14255631/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 21:15:47  来源:igfitidea点击:

Style SVG circle with CSS

csssvghovergeometry

提问by Sebastian

So I have my SVG-circle.

所以我有我的 SVG 圈。

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

I want it to be 120% when one hover the circle. I tried both with width, height and stroke. Haven't find any solution to make the circle bigger when hovering. Any suggestions?

当一个人悬停圆圈时,我希望它是 120%。我尝试了宽度、高度和笔画。悬停时没有找到任何使圆圈变大的解决方案。有什么建议?

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

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

回答by Peter Collingridge

As per the SVG 1.1 specification you can't style the rattribute of an SVG circle using CSS https://www.w3.org/TR/SVG/styling.html#SVGStylingProperties. But you can do:

根据 SVG 1.1 规范,您不能r使用 CSS https://www.w3.org/TR/SVG/styling.html#SVGStylingProperties 设置SVG 圆的属性的样式。但你可以这样做:

<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, which is partially supported by some modern browsers, you can style the rattribute of circles using CSS. https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes

在一些现代浏览器部分支持的 SVG 2 中,您可以r使用 CSS 设置圆形属性的样式。https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes

回答by interestinglythere

Want to only use CSS? Use lineinstead of circle.

只想使用 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/

http://jsfiddle.net/rLk7rd8b/

回答by Anshul

It can be done in CSS(3), by setting the transform-origin of the circle to its center and then using scaletransformation:

它可以在 CSS(3) 中完成,方法是将transform-圆的原点设置为其中心,然后使用scale转换:

circle {
  transform-origin: center center;
}

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

回答by Jonathan Sewell

As Phillip suggested in the comment above you can do this with CSS 3 transform.

正如 Phillip 在上面的评论中建议的那样,您可以使用 CSS 3 转换来做到这一点。

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

("-webkit" prefix is for Chrome only)

(“-webkit”前缀仅适用于 Chrome)

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

请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Here's a working example with CSS transitions too: http://jsbin.com/sozewiso/2

这里也是一个使用 CSS 转换的工作示例:http: //jsbin.com/sozewiso/2

回答by phonicx

This should work for you.

这应该对你有用。

jsfiddle

提琴手

You need to manipulate the radius and this can only be done via javascript:

您需要操纵半径,这只能通过 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);

    });
});

回答by Milind Anantwar

Using javascript:

使用javascript:

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

Demo Here

演示在这里

回答by stefanz

I am not sure, but you can not full custom a svg only with css. However, if you will do it won't be cross browser. In the past I used svg for creating a complex map and for me the solution was rapheljs.

我不确定,但是您不能仅使用 css 完全自定义 svg。但是,如果您愿意,它就不会跨浏览器。过去我使用 svg 来创建复杂的地图,对我来说解决方案是rapheljs

EDIT:

编辑:

Using @phonicx calculus for radius i modified the code, having somethingwhich is able to customize each circle ( in case if you have more ) :

使用@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>

回答by Miguel Alejandro Fuentes Lopez

You forgot the stroke color:

你忘记了描边颜色:

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

回答by grmdgs

I was working on something else and came across this question. I'm doing something similar and using greensock. I animated the scale on a couple circles using Greensock, GSAP. I needed to animate tranformOrigin and the scale property:

我正在做其他事情并遇到了这个问题。我正在做类似的事情并使用greensock。我使用 Greensock、GSAP 在几个圆圈上制作了比例动画。我需要为 tranformOrigin 和 scale 属性设置动画:

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

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

示例 https://codepen.io/grmdgs/pen/RgjdPv

Greensock https://greensock.com/

Greensock https://greensock.com/

回答by Vasyl Gutnyk

If you want to scale it, try with transform: scale(1,5), so you don't need to change cx,cy,r attributes.

如果您想缩放它,请尝试使用transform: scale(1,5),这样您就不需要更改 cx,cy,r 属性。