html - 地図上のHTML「ドーナツ」

Question

で正方形/長方形と円を作成できることは知っています<map>が、「ドーナツ」形状、つまり小さな同心円を切り取った大きな円を作成することは可能ですか?

Answer 1

フィドルを使用したコードは次のとおりです。

http://jsfiddle.net/DUgBB/1/

<div style="text-align:center; width:300px; margin-left:auto; margin-right:auto;">
<img id="mapimg" src="http://1.bp.blogspot.com/-ddhpRGckLK8/Tu3MuGz111I/AAAAAAAABbM/imvskMreBFs/s1600/dunkin+donuts+printable+coupons_25281_2529.jpg" usemap="#map" border="0" width="300" height="300" alt="" />
<map id="map" name="map">
<area shape="poly" coords="34,81,87,35,142,17,218,36,265,82,280,159,237,240,165,278,82,265,13,161,32,89,121,128,109,164,126,191,169,182,190,147,179,126,151,120,128,128,39,82," href="http://google.com/" alt="" title=""   />
</map>
</div>
        ​

これを示す画像は次のとおりです。

ひどい手描きドーナツ

私は基本的に、ドーナツの形を作るためにポイントをラップしてカスタムポリゴンを作成しました.