css - 无法使 SVG 圆圈动画化

Question

我得到了一张有 12 个点的 map ，每个点都需要像演示中一样在悬停时淡入。问题是我无法使半径动画化。是否可以使用 CSS 淡化 SVG 的半径大小，或者是否有其他方法可以做到这一点？我的第二个问题是我无法在我的 SVG 中获取背景图像。有解决办法吗？

My code...

Answer 1

是的，这是可能的..

Fiddle

CSS

#container {
}

#kaart {
}

.fullkaart {
    fill:#7FC577;
}

.cirkel {
fill: green;
-webkit-transform: scale(1);
-moz-transform: scale(1);
    -ms-transform: scale(1);
     -o-transform: scale(1);
        transform: scale(1);
-webkit-transform-origin: center;
   -moz-transform-origin: center;
    -ms-transform-origin: center;
     -o-transform-origin: center;
        transform-origin: center;
    -webkit-transition: fill, -webkit-transform
   -moz-transition: fill, -webkit-transform
    -ms-transition: fill, -webkit-transform
     -o-transition: fill, -webkit-transform
        transition: fill, -webkit-transform
  -webkit-transition-duration: 3s;
   -moz-transition-duration: 3s;
    -ms-transition-duration: 3s;
     -o-transition-duration: 3s;
        transition-duration: 3s;
     }

     .cirkel:hover{
       fill: yellow;
       -webkit-transform: scale(2);
   -moz-transform: scale(2);
    -ms-transform: scale(2);
     -o-transform: scale(2);
        transform: scale(2);
      -webkit-transition: fill, -webkit-transform
   -moz-transition: fill, -webkit-transform
    -ms-transition: fill, -webkit-transform
     -o-transition: fill, -webkit-transform
        transition: fill, -webkit-transform
      -moz-transition-duration: 3s;
    -ms-transition-duration: 3s;
     -o-transition-duration: 3s;
        transition-duration: 3s;

HTML

<circle class="cirkel" cx="245.929" cy="68.256" r="5.08" onmouseover="evt.target.setAttribute('r', '10');" onmouseout="evt.target.setAttribute('r', '5.08');"/>

我从前两个 circle 标签中删除了 onmouseover 和 onmouseout 属性。 删除它们并相应地调整比例