어떻게 다각형을 호형에서 호형으로 변형합니까?

Question

미국의 양방향지도를 만들고 싶습니다. 사용자가 마우스를 한 상태에 놓을 때마다 사용자가 클릭 할 수있는 정보로 가득 찬 호버링 사각형으로 다각형을 변형하고 싶습니다. 마우스를 마우스로 가리거나 정상적으로 움직일 때까지 일반적으로 보이지 않는 rect를 만들어야합니까? 아래는 내가 어떻게하고 싶은지, 그것을 실행하는 방법을 잘 모르겠습니다.

<polygon 
    points="19,133 81,152 67,210 132,309 134,319 134,330 127,340 126,350 81,348 79,339 79,329 69,322 60,310 46,299 
    35,296 37,285 24,256 22,247 27,239 20,234 20,226 20,221 19,214 9,195 8,183 8,172 8,166 13,162 15,140"/> 
    <rect x="33" y="220" rx="20" ry="20" width="250" height="150"> 
     <animateTransform attributeName="x" from="10" to="200" dur="3s" fill="freeze"/> 
     <animateTransform attributeName="transform" type="scale" from="0" to="1" dur="3s"/> 
    </rect> 

Answer 1

아마도 이와 비슷한 것일 수 있습니다. 다른 비트를 보이거나 보이지 않게하고 싶을 때 나는 확신하지 못하지만, 적절하게 조정할 수 있다고 확신합니다.

<svg xmlns="http://www.w3.org/2000/svg"> 
<polygon 
    points="19,133 81,152 67,210 132,309 134,319 134,330 127,340 126,350 81,348 79,339 79,329 69,322 60,310 46,299 
    35,296 37,285 24,256 22,247 27,239 20,234 20,226 20,221 19,214 9,195 8,183 8,172 8,166 13,162 15,140"> 
     <set id="a1" attributeName="visibility" to="hidden" begin="mouseover" dur="3s"/> 
</polygon> 
    <rect x="33" y="220" rx="20" ry="20" width="250" height="150" transform="scale(0)" visibility="hidden" pointer-events="all"> 
     <set attributeName="visibility" to="visible" begin="a1.begin" dur="10s"/> 
     <animateTransform attributeName="x" begin="a1.begin" from="10" to="200" dur="3s" fill="freeze"/> 
     <animateTransform attributeName="transform" begin="a1.begin" type="scale" from="0" to="1" dur="3s" fill="freeze"/> 
    </rect> 
</svg>