Skip to content

Instantly share code, notes, and snippets.

@oelna

oelna/svg-imagemap.html

Last active April 24, 2020 12:22
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save oelna/1efd149dcb9ea0fa8b526a44ff108446 to your computer and use it in GitHub Desktop.
Save oelna/1efd149dcb9ea0fa8b526a44ff108446 to your computer and use it in GitHub Desktop.
Download ZIP
A simple example of responsive image maps with HTML and SVG
Raw
svg-imagemap.html
<!DOCTYPE html>
<html>
<head>
<title>SVG image maps</title>
</head>
<body>
<!-- https://wiki.selfhtml.org/wiki/SVG/Tutorials/responsive_Imagemaps -->
<!-- https://n-peugnet.github.io/image-map-creator/ -->
<!-- width can be any value, set here or in CSS, to make this responsive -->
<svg viewBox="0 0 1536 1024" width="50%">
<image width="1536" height="1024" xlink:href="http://wiki.selfhtml.org/images/8/82/Mount_Rushmore.jpg"></image>
<a xlink:href="https://de.wikipedia.org/wiki/George_Washington" class="washington">
<!-- rect, circle, ellipse, polygon, path -->
<rect x="300" y="125" width="250" height="300" />
</a>
<a xlink:href="https://de.wikipedia.org/wiki/Thomas_Jefferson" class="jefferson">
<rect x="550" y="225" width="200" height="300" />
</a>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment