HTML 将每个元素视为一个由多个层组成的盒子（参见盒子模型）。
这意味着任何嵌入到 HTML 页面的图像都将被包裹在一个框（正方形）中。<img>因此，当我们用链接标签包裹图片标签时<a>，整个image-box将被视为链接（可点击）。
正如您所提到的，更改此默认行为的一种方法是使用<map>element. 但是，这不是很“灵活”，并不总是我们案例的最佳解决方案。例如，图像可以被塑造成不规则的形状，这使得牧民可以为其定义精确的地图。
但是，解决这个问题的方法是设计或使用.svg图像文件格式的图像。
HTML 5 支持可缩放矢量图形 (SVG) 格式，并具有自己的 HTML 标签<svg>。事实上，这种格式在交互式 Web 开发中被大量使用。简单来说，SVG 的关键在于 SVG 在<svg>标签内以矢量形式将图像中的不同形状分组。
在我们有了.svg想要在实际存在图像的位置精确点击的图像之后，我们可以按照以下简单步骤操作（还有其他方法可以做到）：
.svg使用文本编辑器打开您的图像。- 复制
<svg>标签及其所有嵌套元素。
- 将标记粘贴
<svg>到 HTML 文档的正文中。
<a>在最里面的嵌套标签内添加<g>标签。
完毕！
您应该有一个“完美”的可点击图像，如您所愿。对于 JSFiddle 游乐场，请单击此处。
这是一个快速的片段：
<body>
<!-- The SVG tag below was copied exactly as is from our .svg file -->
<!-- Then added the <a> tag inside the inner-most nested <g> tag -->
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="300.000000pt" height="300.000000pt" viewBox="0 0 300.000000 300.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,300.000000) scale(0.050000,-0.050000)" fill="#000000" stroke="none">
<!-- The <a> tag we've added -->
<a href="https://mojly.com/wp-content/uploads/2017/10/hilarious-animal-pics-01-animals-with-human-teeth.jpg">
<path d="M4390 5952 c-113 -53 -289 -221 -427 -409 -84 -114 -98 -125 -153
-117 -171 27 -523 -80 -714 -217 l-98 -71 -97 71 c-186 137 -427 215 -661 215
l-115 0 -91 123 c-228 310 -551 543 -524 378 5 -30 19 -167 31 -305 12 -137
30 -281 40 -318 17 -66 13 -74 -119 -213 -336 -354 -415 -830 -210 -1265 l50
-106 -38 -104 c-235 -632 -120 -1587 226 -1874 64 -53 11 -59 -607 -64 l-636
-6 -79 -55 c-242 -167 -208 -515 61 -637 75 -34 153 -37 1058 -38 l977 0 -13
-75 c-25 -132 -109 -254 -295 -425 -213 -197 -351 -454 -221 -414 553 173 689
197 799 139 298 -158 287 -155 466 -155 179 0 168 -3 466 155 110 58 246 34
799 -139 130 -40 -8 217 -221 414 -186 171 -270 293 -295 425 l-13 75 977 0
c905 1 983 4 1058 38 269 122 303 470 61 637 l-79 55 -636 6 c-618 5 -671 11
-607 64 346 287 461 1244 225 1877 l-39 107 51 103 c208 416 127 909 -208
1262 -135 141 -136 144 -120 222 10 43 27 178 39 299 13 121 27 258 32 305 5
47 7 85 5 85 -3 0 -50 -22 -105 -48z m-1960 -899 c250 -67 549 -348 550 -518
0 -19 9 -35 20 -35 11 0 20 16 20 35 1 170 300 451 550 518 734 196 1249 -740
706 -1280 -233 -231 -581 -286 -874 -138 -71 36 -130 63 -132 60 -2 -3 -61
-115 -132 -250 -70 -135 -132 -245 -138 -245 -6 0 -68 110 -138 245 -71 135
-130 247 -132 250 -2 3 -61 -24 -132 -60 -297 -151 -682 -79 -905 167 -500
553 23 1441 737 1251z m-55 -3239 c25 -23 45 -55 45 -72 0 -19 25 -1 61 43 78
95 190 105 270 26 47 -47 49 -60 49 -311 0 -251 -2 -264 -49 -311 -80 -79
-192 -69 -270 26 -40 49 -61 63 -61 41 0 -104 -198 -150 -294 -68 l-56 49 0
260 c0 246 3 262 47 310 75 79 175 82 258 7z m1146 -31 c36 -44 59 -60 59 -41
0 114 205 162 298 70 51 -52 52 -59 52 -314 l0 -261 -56 -49 c-93 -80 -294
-37 -294 63 0 16 -9 29 -20 29 -11 0 -20 -11 -20 -24 0 -108 -203 -155 -291
-67 -54 55 -75 504 -27 594 57 108 210 108 299 0z" />
<path d="M2090 4647 c-352 -186 -235 -697 160 -697 391 0 514 514 166 692 -91
46 -243 48 -326 5z" />
<path d="M3590 4647 c-352 -186 -235 -697 160 -697 391 0 514 514 166 692 -91
46 -243 48 -326 5z" />
</a>
</g>
</svg>
</body>