Question

如何使区域呈不规则形状而不是矩形？我使用下面的svg代码，尝试制作地图，但我无法得到它如何使鼠标滑过或点击区域而不是矩形就像我绘制的矢量。

<svg version="1.1" class="flag_link_0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="190.323px" height="325.806px" viewBox="0 0 190.323 325.806" enable-background="new 0 0 190.323 325.806" xml:space="preserve">
    <polygon fill="#A71F20" points="10.839,314.677 181.839,314.677 181.839,48.186 10.839,9.677 "/>
</svg>

 $('.flag_link_0').hover(function(){
    console.log('in');
},function(){

});

Answer 1

您可以使用纯CSS来实现您正在寻找的结果。在id/class添加svg，在这种情况下，我添加了id poly1。

这是你的svg修改过的JSFiddle：>>>CLICK HERE<<<

SVG：

<svg version="1.1" class="flag_link_0" xmlns="http://www.w3.org/2000/svg"  mlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="190.323px" height="325.806px" viewBox="0 0 190.323 325.806" enable-background="new 0 0 190.323 325.806" xml:space="preserve">
    <polygon fill="#A71F20" stroke="#A71F20" stroke-width="3px" id="poly1" points="10.839,314.677 181.839,314.677 181.839,48.186 10.839,9.677 " />

CSS：

#poly1:hover {
    fill: #ccc;
    stroke: #A71F20;
    stroke-width: 3px;
}

如何使面积不规则形状而不是矩形？

1 个答案: