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

根据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');"/>

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

Answer 2

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

Answer 3

不确定此人是否仍在寻找答案,但对于其他任何人来说,可以通过将圆的变换原点设置为其中心来在CSS(3)中完成.

circle {
  transform-origin: 168px 179px;
  transform: scale(1,1);

}

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

CSS的警告现在与维度相结合,我们必须知道SVG中圆的确切中心.

Answer 4

单击“运行代码片段”进行测试：

.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;
}

Answer 5

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