I’m working on a website where the home page needs two clickable sections, each leading to different specializations of the company. I created two right-angled triangle images that form a square when placed together. The top triangle should link to one page, and the bottom triangle to another. After some research, I found that using SVG would be the best approach for achieving this, especially since the design needs to be responsive. However, I encountered issues where the links break when images are added, and clicking anywhere only redirects to the second link.
Here’s the code I used:
“`html
“`
I had to nest the SVG in a file due to hosting server requirements. The images are two right-angled triangles with no background. Here’s a live example: [Live Example](http://work.icetechsolutions.co.za/).
I tried centering the SVG using CSS but couldn’t get it right. Any help would be appreciated.
One user suggested that the image is scalable, but the code for the hotspot has absolute coordinates and doesn’t adjust when resized. They also mentioned that wrapping PNGs in an SVG tag doesn’t make them SVG images, as SVG is an XML-based file format and textual in nature.
Another user pointed out that the viewBox attribute is for SVG graphics, not bitmaps, and using relative sizing on graphics with absolute coordinates on the polygon could be part of the problem. They suggested that the web industry has moved away from splash pages in favor of content and recommended using background images, tags, text, and CSS instead.
Here’s an example they provided: [Example](http://testing.donaldwhitehead.com/Spiceworks/2087557.html).
They also recommended splitting the logos into individual SVG files and using a codepen example on making individual SVG images clickable: [Codepen Example](https://codepen.io/thomasquayle/pen/KwxwoO).
Another user mentioned that xlink has been deprecated and suggested using the usemap attribute for creating clickable zones on a PNG image. They provided an example: [Example](http://tibetsupport.org.uk).
I appreciate the suggestions and resources provided. I’ll start with splitting the logos into individual SVG files and work from there. If anyone knows of any WordPress themes or tools that can achieve this, please let me know.
Here’s another attempt using HTML and CSS:
“`html
.whitebg {
width: 100%;
position: absolute;
}
.whitebg img {
width: 80%;
-webkit-clip-path: polygon(0 0, 0 100%, 0 100%, 100% 0);
z-index: 99;
}
.bot span {
position: relative;
right: 0%;
bottom: 0%;
}
#wrapper {
width: 100%;
margin: auto 10%;
}
“`
Here’s a live example: [Live Example](http://work.icetechsolutions.co.za/spiceworks/question/index.html).
Another user suggested using viewport-based units and provided an example: [Example](http://testing.donaldwhitehead.com/Spiceworks/2087557_2.html).
I’m still struggling with this issue and would appreciate any further assistance.
Source: Various contributors on Spiceworks
