0

我想创建一个美国的交互式地图。每当用户将鼠标放在一个状态上时，我希望多边形转换为一个悬停矩形，其中填充了用户可以单击的信息。我是否需要创建一个通常不可见的矩形，直到鼠标悬停在它上面，还是有其他方法可以解决这个问题？以下是我想要发生的事情，我不知道如何执行它。

    <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>
4

1 回答 1

0

可能是这样的。我不确定您何时希望不同的位变得可见/不可见，但我相信您可以根据需要进行调整。

<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>
于 2013-09-30T08:52:05.673 回答