我正忙于一个网站，我需要在主页上有两个可点击的部分，其中一个将您带到公司的一个专业领域，另一个将您带到他们的另一个专业领域。
我创建了一个正方形图像，通过中心分割成两个直 Angular 三 Angular 形我需要顶部的一个在您单击它时转到一个链接，底部的一个转到另一个链接。我做了一些研究，发现使用 SVG 是我实现这一目标的最佳选择，尤其是因为它必须响应，但我没有运气。
我已经尝试在 xml 中编码三 Angular 形然后添加 xml:href链接到三 Angular 形，但这不起作用。
我也用 Inkscape 尝试过很多东西，但没有结果，它要么使可点击位置变小，要么图像变得无响应。
现在我要感谢 Paul LeBeau:
<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 400 300">
<image xlink:href="image.jpg" x="0" y="0" height="100%" width="100%"/>
<a xlink:href="http://www.example.com">
<polygon points="0,0, 400,0, 0,300"/>
</a>
<a xlink:href="http://www.google.com">
<polygon points="400,0, 400,400, 0,300"/>
</a>
</svg>
</body>
</html>
我必须将它嵌套在 html 中，因为这是我的服务器端托管所需要的。当我运行这段代码时会发生什么，它可以工作，它的响应和链接可以工作，但图像不显示它只显示一个黑色方 block 。
在尝试找出解决方案时，我注意到一些图像出现了黑色，因此我尝试了以下方法:
<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 400 300">
<a xlink:href="http://www.example.com">
<polygon points="0,0, 400,0, 0,300"/>
</a>
<a xlink:href="http://www.google.com">
<polygon points="400,0, 400,400, 0,300"/>
</a>
<image xlink:href="image.jpg" x="0" y="0" height="100%" width="100%"/>
</svg>
</body>
</html>
然后显示带有一些黑色槽的图像，但链接不起作用。
考虑一下后，我决定将我的三 Angular 形拆分为没有背景的 .png 图像，并决定用 xml:href 添加它们。和 <a> 内的图片标签三 Angular 形的标签并将其全部包装在一些定位 CSS 中。这是代码:
<!DOCTYPE html>
<html>
<body>
<style>
#positioning {
position: relative;
float: center;
}
</style>
<div id="positioning">
<svg viewBox="0 0 400 300">
<a xlink:href="http://www.example.com">
<polygon points="0,0, 400,0, 0,300"/>
<image xlink:href="image1.png" x="0" y="0" height="100%" width="100%"/>
</a>
<a xlink:href="http://www.google.co.za">
<polygon points="400,0, 400,400, 0,300"/>
<image xlink:href="image2.png" x="0" y="0" height="100%" width="100%"/>
</a>
</svg>
</body>
</html>
我在使用和不使用 CSS 的情况下都尝试过，我得到了相同的结果。这几乎可以工作，三 Angular 形有点在他们应该在的地方但不完全而且黑色也在那里这不是问题但它表明它的工作很好并且整个区域都是可点击的但它只注册了第二个链接(谷歌)无论你点击哪里，它都不会转到第一个链接(示例)。
如有任何帮助，我们将不胜感激。
最佳答案
向 SVG 元素添加链接非常容易。
<svg viewBox="0 0 400 300">
<a xlink:href="javascript:alert('red')">
<polygon points="0,0, 400,0, 0,300" fill="red"/>
</a>
<a xlink:href="javascript:alert('blue')">
<polygon points="400,0, 400,300, 0,300" fill="blue"/>
</a>
</svg>更新
您看到的黑色是两个三 Angular 形多边形。如果您未指定填充颜色，则默认为黑色。
您需要做的就是将它们的填充颜色设置为透明。
<svg viewBox="0 0 400 300">
<image xlink:href="image.jpg" x="0" y="0" height="100%" width="100%"/>
<a xlink:href="http://www.example.com">
<polygon points="0,0, 400,0, 0,300" fill="transparent"/>
</a>
<a xlink:href="http://www.google.com">
<polygon points="400,0, 400,300, 0,300" fill="transparent"/>
</a>
</svg>关于javascript - 如何使用 SVG 制作响应式和交互式图像 map ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47198415/