问题描述
所以我有我的 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 圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！