css - 使用 CSS 设置 SVG 圆圈样式

Question

所以我有我的 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%;
  }

Answer 1

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