如何使用SVG制作响应式和交互式图像地图 [英] How to make a responsive and interactive Image map using SVG
问题描述
我正忙于网站，在主页上我需要有两个可单击的部分，其中一个将您带到公司的一个专业领域，另一个将您带到他们的另一个专业领域.
I'm busy with a website and on the home page I need to have two clickable sections one of which takes you to one specialization of the company and the other takes you to their other specialization.
我在中心创建了一个正方形图像分割，使两个直角三角形成为一个直角三角形.单击该链接时，需要顶部的一个链接到一个链接，底部的一个链接转到另一个链接.我进行了一些研究，发现使用 SVG 是实现此目标的最佳选择，特别是因为它必须具有响应能力，但我没有运气.
I have created a square image split trough the center making two right angled triangles I need the top one to go to one link when you click on it and the bottom one to go to another link. I did some research and I saw that using SVG would be my best bet in achieving this especially since it must be responsive but I have had no luck.
我尝试在xml中编码三角形，然后将xml:href链接添加到三角形中，但这没有用.
I have tried coding triangles in xml then adding xml:href links to the triangles but this did not work.
我还使用Inkscape尝试了多种方法，但没有结果，它使可点击的位置变小或图像变得无响应.
I have also tried multiple things with Inkscape but without results, it either makes the clickable location to small or the image becomes unresponsive.
现在我要感谢Paul LeBeau:
I now have the following thanks to 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中，因为这是我的服务器端托管所需的.当我运行此代码时，将发生问题，即它可以工作，它的响应能力很强，链接也可以工作，但是图像没有显示出来，只显示了一个黑色的正方形.
I have to nest it in an html as that is what my server side hosting requires. What happens when I run this code is that it works, its responsive and the links work but the image does not show it only shows a black square.
在试图找出解决方案时，我注意到一些图像通过黑色，因此我尝试了以下操作:
While trying to figure out a solution I noticed some of the image coming trough the black so I tried the following:
<!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>
然后显示带有黑色凹槽的图像，但链接不起作用.
Which then shows the Image with some black coming trough but the links do not work.
经过一番思考后，我决定将三角形分成没有背景的.png图像，并决定使用xml:href和在<a>三角形标签内的图像标签添加它们，并将其全部包裹在定位CSS.这是代码:
After thinking on it a bit I decided to split up my triangles into .png images without backgrounds and decided to add them with xml:href and the image tag inside the <a> tags of the triangles and wrapping it all in some positioning CSS. Here is the code:
<!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的情况下，我都尝试了相同的结果.这几乎可以正常工作，三角形在某种程度上应该位于但不完整，黑色也在那里，这没问题，但这表明其工作正常，整个区域都可单击，但仅注册了第二个链接(google)，无论您在何处单击，都根本不会转到第一个链接(示例).
I tried this with and without the CSS I get the same results. This almost works, the triangles are somewhat where they are supposed to be but not completely and the black is also there which is not a problem but it shows that its working which is nice and the whole area is clickable but it only registers the second link (google) no matter where you click and it does not go to the first link (example) at all.
请提供任何帮助.
推荐答案
添加指向SVG元素的链接非常容易.
It is very easy to add links to SVG elements.
<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>
更新
您看到的黑色是两个三角形多边形.如果您未指定填充色，则默认为黑色.
The black you are seeing are the two triangle polygons. If you don't specify a fill colour, it defaults to black.
您需要做的就是将其填充颜色设置为透明.
All you need to do is set their fill colour to transparent.
<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>
这篇关于如何使用SVG制作响应式和交互式图像地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
