使用 CSS 样式化 SVG 圆圈

Style SVG circle with CSS(使用 CSS 样式化 SVG 圆圈)

问题描述

所以我有我的 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 设置 SVG 圆圈的 r 属性的样式 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 中，您可以使用 CSS 设置圆的 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 圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！