Question

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

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

如何在悬停时将多边形转换为rect？

1 个答案: