使用 CSS 样式化 SVG 圆圈

Posted 2023-03-06

【中文标题】使用 CSS 样式化 SVG 圆圈

【英文标题】：Style SVG circle with CSS

【发布时间】：2012-12-24 16:55:26

【问题描述】：

所以我有我的 SVG 圆。

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

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

circle:hover
  
    stroke-width:10px;
  

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

【问题讨论】：

不知道svg是否存在，但是css3转换呢？

+1 用于 css 变换，stroke 在 OP 示例中不起作用，因为他没有定义 stroke 颜色。使用与圆形填充相同的颜色，它看起来会“更大”。

【参考方案1】：

使用 JQUERY：

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

Demo Here

【参考方案2】：

如果你想扩展它，试试transform: scale(1,5)， 所以你不需要改变 cx,cy,r 属性。

【参考方案3】：

点击“运行代码sn-p”进行测试：

.myCircle:hover 
  r: 20


.myCircle 
  transition: ease 1s

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
       <circle class="myCircle" cx="10" cy="10" r="5" fill="black" />
    </svg>

我偶然发现了这个页面，但想添加我自己认为最简单的答案。显然它在 Firefox 中不起作用，这就是为什么有人反对。

第 1 步：将课程（例如“myCircle”）添加到您的圈子

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

第 2 步：在您的 CSS 文件中，您可以使用“r”作为 CSS 属性！

.myCircle:hover 
  r: 100;

第 3 步（可选）：随意添加过渡以使半径平滑增长：

.myCircle 
    transition: all 1s;

【讨论】：

最新的 Firefox (74) 不支持通过 CSS 设置 r 属性的样式。说“无效的属性值”。

@PawełGościcki，所以在 FireFox 中运行上面的代码 sn-p 时看不到黑点？

我看到了黑点，但是:hover 效果不起作用。

根据this answer 非零css值必须有单位。如果您添加“px”，它就可以工作（在 Chrome 95 和 Firefox 93 中）并且根据MDN“从 SVG2 开始，r 是一个几何属性，这意味着该属性也可以用作圆形的 CSS 属性。”不幸的是，目前还没有找到任何关于良好浏览器支持的具体信息......

【参考方案4】：

这可以在 CSS(3) 中完成，通过将圆的transform-origin 设置为其中心，然后使用scale 转换：

circle 
  transform-origin: center center;


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

【讨论】：

是的！加上前缀使其跨浏览器（-o-transform-origin、-webkit-transform-origin、-moz-transform-origin、-o-transform、-webkit-transform、-moz-transform）

情况略有不同，但对我来说，将原点设为50% 50% 并从scale(0,0) 过渡到scale(1,1) 对我有用。居中但仍未指定绝对大小。

谢谢！简单优雅的方法，对我帮助很大！

【参考方案5】：

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

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

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

绿袜 https://greensock.com/

【参考方案6】：

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

<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 中，您可以使用 CSS 设置圆圈的 r 属性样式。 https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes

【讨论】：

onmouseover="this.setAttribute('r', '72'); 应该也能正常工作

很好的解决方案。即使它没有使用 CSS。谢谢！

2016 年的正确答案似乎是 Anshul 的答案

【参考方案7】：

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

【讨论】：

+1 好答案！我在<svg> 标签中添加了width="300" height="300"，以便能够看到任何内容。当然你不能这样画圆的轮廓。

在我的实验中不太循环。 :(

这就是我看到的，它看起来很圆。 i.imgur.com/cKX9n3a.png@Ben，你用的是什么浏览器？

如何在 SVG 之前画一个圆：绘制一个 0 宽和 0 高的 div，边框长度为 r，边框半径为 r。 SVG来救援。现在我们画一条长度为 0 的线...?

【参考方案8】：

你忘记了描边颜色：

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

【讨论】：

试过这个解决方案，但它在 Chrome 中存在问题。有时它会起作用，有时圆圈只是一个轮廓。

【参考方案9】：

正如 Phillip 在上面的评论中建议的那样，您可以使用 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

【讨论】：

根据caniuse.com/#search=transform，大多数供应商已经放弃了前缀。例外（在撰写本文时）是 Safari，它仍然使用 -webkit

【参考方案10】：

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

编辑：

对半径使用@phonicx 演算我修改了代码，拥有something 可以自定义每个圆（以防万一）：

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

【参考方案11】：

这应该适合你。

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

    );
);

【讨论】：

mouseleave 不会恢复到原来的大小

是的，只需添加代码以恢复 mouseleave 上的旧半径，这是一个很好的答案。