html - svg 中的图像在鼠标悬停时不缩放

Question

我的 svg 中有一张图片，我想使用 css 在鼠标悬停时缩放该图片。

这是我的 svg 文档。

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1260 720" width="1260px" height="740px" preserveAspectRatio="xMinYMin meet">
<g>
    <g id="step-5">
   <image overflow="visible" class="step-circle-5" width="173" height="173" 
 xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK0AAACsCAYAAAAJ8yzmAAA
  ACXBIWXMAAAkSAAAJEgFGxru7AAAA.. transform="matrix(0.9334 0 0 0.9389 843.2724 402.5272)"></image>

  <text transform="matrix(1.0004 0 0 1 825.4094 649.0767)" fill="#A9D48D" font-size="92">5</text>
 </g>
....
</g>
</svg>

这是CSS

.step-circle-5:hover{
    transform: translate(843.2724 402.5272) scale(1.2) translate(843.2724 402.5272);
    -webkit-transform: translate(843.2724 402.5272) scale(1.2) translate(843.2724 402.5272);
}

这是codepen上的完整代码

Answer 1

我认为你的选择器是错误的，试试这个:

/*  .step-circle-1 is last <image> tag in svg document */
svg .step-circle-1:hover{
  cursor:pointer;
  transform: scale(1.2)
  translate(5%,50%);
}

有了翻译你一定要玩一点...