CODEWITHSUNDEEP
svg
Gaius Augustus
Gaius Augustus

Reputation: 970

SVG with two shapes, two clickable links

I've never worked with SVGs before, but have been able to create this shape that I need. Two triangles, each with an image.:

<svg viewbox="0 0 10 6.7">
  <defs>
	<clipPath id="top">
		<polygon points="0 0, 9.9 0, 0 6.6" />
	</clipPath>
	<clipPath id="bottom">
	  <polygon points="10 0.1, 10 6.7, 0.1 6.7" />
	</clipPath>
  </defs>
	<image xlink:href="https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/30423_pets-products_january-site-flip_3-cathealth_short-tile_592x304._CB286975940_.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#top)" data-state='top'/>
	<image xlink:href="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#bottom)" data-state='bottom'/>
</svg>

However, now I want to have each of these images link to something. I tried adding a <a xlink:href="url-to-go-to"> around the image and polygon tags, but that didn't work.

So, how can I make two separate links (one for each polygon) within this SVG?

Upvotes: 0

Views: 48

Answers (1)

jasonharper
jasonharper

Reputation: 9587

<a> tags around the images work for me; perhaps you didn't close them properly?

<svg viewbox="0 0 10 6.7">
  <defs>
    <clipPath id="top">
      <polygon points="0 0, 9.9 0, 0 6.6" />
    </clipPath>
    <clipPath id="bottom">
      <polygon points="10 0.1, 10 6.7, 0.1 6.7" />
    </clipPath>
  </defs>
  <a xlink:href="http://ebay.com">
    <image xlink:href="https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/30423_pets-products_january-site-flip_3-cathealth_short-tile_592x304._CB286975940_.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#top)" data-state='top'/>
  </a>
  <a xlink:href="http://amazon.com">
    <image xlink:href="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#bottom)" data-state='bottom'/>
  </a>
</svg>

Upvotes: 2

Related Questions