CSS样式SVG圆 [英] Style SVG circle with CSS

问题描述

所以我有我的SVG圆。

So I have my SVG-circle.

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

当一个鼠标悬停在圆圈上时，我希望它为120％。我尝试了宽度，高度和笔触。没有找到任何解决方案，使圆形更大时悬停。有任何建议吗？

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?

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

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

推荐答案

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

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

<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 属性。 https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes

In SVG 2, which is partially supported by some modern browsers, you can style the r attribute of circles using CSS. https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes

这篇关于CSS样式SVG圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！