【发布时间】：2017-11-09 09:39:16
【问题描述】：
我正忙于一个网站，在主页上我需要有两个可点击的部分，其中一个将您带到公司的一个专业领域，另一个将您带到他们的另一个专业领域。
我创建了一个方形图像，从中心分割成两个直角三角形，当您单击它时，我需要顶部的一个转到一个链接，而底部的一个转到另一个链接。我做了一些研究，发现使用 SVG 是实现这一目标的最佳选择，特别是因为它必须具有响应性，但我没有运气。
我尝试在xml 中编码三角形，然后将xml:href 链接添加到三角形，但这不起作用。
我还用 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 中，因为这是我的服务器端托管所需要的。当我运行这段代码时会发生什么，它可以工作，它的响应性和链接工作，但图像没有显示它只显示一个黑色方块。
在尝试找出解决方案时，我注意到一些图像从黑色中透出，因此我尝试了以下方法：
<!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>
然后显示带有一些黑色槽的图像，但链接不起作用。
经过一番思考后，我决定将我的三角形分割成没有背景的 .png 图像，并决定在三角形的 xml:href 和图像标签内添加它们，并将它们全部包裹在一些三角形的 <a> 标签内定位 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 的情况下都试过这个，我得到了相同的结果。这几乎可以工作，三角形在它们应该在的位置但不完全，黑色也在那里，这不是问题，但它表明它的工作很好，整个区域都是可点击的，但它只注册了第二个链接（谷歌）无论您点击哪里，它都不会转到第一个链接（示例）。
如有任何帮助，我们将不胜感激。
【问题讨论】：
-
致 - red9350：问题很相似，但他想要的答案和我不同。
标签： javascript html css svg responsive