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，使其比图标大一点，并且将其居中。

您无法在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>

Answer 2

通过将overflow: visible;添加到SVG元素中，您应该能够避免截止效应，例如here's。找不到browser compatibility，所以我不确定所有主流浏览器是否都支持。

另一种方法可能是使用js调整svg viewBox的大小或设置一个包含悬停时圆圈的viewBox，如下所示：

circle { 
 fill: #EEE;
 cx: 20;
 cy: 20;
 r: 20;
}

path {
 fill: #CCC;
}

svg:hover circle {
 r: 22;
}

<svg width="60" height="60" viewBox="-2 -2 60 60">
 <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>

悬停时调整SVG圈子的大小已溢出：隐藏的问题

2 个答案: