Fiddle

Question

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

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');"/>

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

无法获得动画的SVG圈子

1 个答案:

Fiddle