css - 悬停时调整 SVG 圆圈大小溢出 : hidden issue

Question

我有一个 SVG 图像，我想在悬停时调整它的大小，如下所示:

<svg>
                    <circle />
                    <path d="M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" />
                </svg>

CSS:

circle {
  fill: #EEE;
  cx: 20;
  cy: 20;
  r: 20;
}

path {
  fill: #CCC;
}

svg:hover circle {
  width: 40px;
  height: 40px;
  r: 22;
}

但是，由于 SVG 具有溢出隐藏属性，因此当我将鼠标悬停时，圆的两侧会被截断。但我似乎无法覆盖它。关于如何解决这个问题有什么建议吗？

请参阅codepen: https://codepen.io/aguerrero/pen/EeXJRx

Answer 1

仔细查看您的代码，我发现它可以在 Chrome 中运行，但不能在其他浏览器中运行。 我对您的代码做了一些更改:

1:我在你的 svg 中添加了一个 viewBox，使其比图标大一点，并且我将它居中。

1. 您不能在 css 中修改像 cx cy r 这样的表现属性。表现属性属于svg，可以在javascript中修改

3.我使用了 javascript mouseover/mouseout 事件而不是 css hover。如果您不想使用 javascript，您可以尝试对圆使用 css 比例。

let circle= document.querySelector("circle")
circle.addEventListener("mouseover",()=>{
  circle.setAttributeNS(null,"r", 22)
})
circle.addEventListener("mouseout",()=>{
  circle.setAttributeNS(null,"r", 20)
})

circle {fill: #EEE;}

path {fill: #CCC;}

svg{overflow:visible;
    border:1px solid;}

<svg viewBox="-5 -5 50 50" width="44">
					<circle cx="20" cy="20" r=20 />
					<path id="test" 
                d="M20,31 
                   C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 
                   C10.2743515,20.6156479 10,19.6181623 10,18.1428571
                   C10,15.5113854 12.4883456,13 15,13 
                   C17.3176009,13 18.9621484,13.8491346 20,15.5714286
                   C21.0382977,13.8491346 22.6828452,13 25,13 
                   C27.5116544,13 30,15.5113854 30,18.1428571 
                   C30,19.6181623 29.7256485,20.6156479 28.75,22
                   C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" />
				</svg>