-1

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.

Jakes
  • 1
  • 1
  • 4
  • Possible duplicate of: https://stackoverflow.com/questions/11374059/make-an-html-svg-object-also-a-clickable-link – red9350 Nov 09 '17 at 11:00
  • To - red9350: The questions are quite similar but he wants a different answer then I do. – Jakes Nov 09 '17 at 13:16

1 Answers1

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>
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • Thank you for taking time to answer my question and it is a very nice answer, thank you but the problem is with this code the home page will not be responsive. – Jakes Nov 09 '17 at 12:59
  • Sorry I could have added that my self. Can you please explain to me how I would then incorporate this into my image? I added my image right underneath the opening svg tag and removed the fill but it just comes up as a black square. – Jakes Nov 09 '17 at 15:22
  • Ok so I noticed some parts of the image coming trough the black so I put the image tag just above the closing svg tag and now I see the image with some black behind it but the the links do not work. – Jakes Nov 09 '17 at 15:56
  • Sorry. I can't help debug imaginary code. Please create a [mcve]. Add a Stack Overflow snippet, or link to a fiddle or codepen, to your question. – Paul LeBeau Nov 09 '17 at 16:00
  • Question has been updated, let me know if I can make it easier for you. – Jakes Nov 10 '17 at 08:33
  • I did some experimenting, please see the question for an update. @Paul LeBeau – Jakes Nov 10 '17 at 10:13
  • Thank you, that even made the positioning appear correct but the links are still not working properly, it takes me to google no matter where I click. @Paul LeBeau – Jakes Nov 10 '17 at 10:42
  • The first triangle covers the upper left. It works fine for me. Tried Chrome and Firefox. – Paul LeBeau Nov 10 '17 at 12:35