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.

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.

I have tried coding triangles in xml then adding xml:href links to the triangles but this did not work.

I have also tried multiple things with Inkscape but without results, it either makes the clickable location to small or the image becomes unresponsive.

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>

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.

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>

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.

Please any help would be appreciated.

回答1:

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>

Update

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>

来源：https://stackoverflow.com/questions/47198415/how-to-make-a-responsive-and-interactive-image-map-using-svg

标签

javascript

html

css

svg

responsive