SVG 서클에 애니메이션을 적용 할 수 없습니다.

Question

데모와 같이 호버 위에 각각 페이드 인해야하는 12 개의 점이있는지도가 있습니다. 문제는 반경 애니메이션을 얻을 수 없다는 것입니다. 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 나는 r에

<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 속성을 강조했습니다. 그들을 제거하고 그에 따라 스케일을 조정하십시오.