如何使区域成为不规则形状而不是矩形? [英] How to make area be irregular shape not rectangle?

问题描述

如何使区域成为不规则形状而不是矩形? 我使用了如下的svg代码，试图制作地图，但我无法理解如何将鼠标悬停在该区域上，或者单击区域而不是矩形，就像我绘制的矢量一样.

http://jsfiddle.net/Ra4BF/

<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(){

});

解决方案

您可以使用纯CSS获得所需的结果.在您的svg中添加id/class，在这种情况下，我添加了poly1的id.

这是您的svg修改后的JSFiddle: >>>点击此处<<<

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

How to make area be irregular shape not rectangle? I used svg code like below, tried to make a map but I just can't get it how to make mouse over or click the area not rectangle be just like the vector what i draw.

http://jsfiddle.net/Ra4BF/

<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(){

});

解决方案

You can use pure CSS to achieve the results you are looking for. Add an id/class to your svg, in this case I added an id of poly1.

Here is your svg modified 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;
}

这篇关于如何使区域成为不规则形状而不是矩形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！