Html Question posted in
Some basic documentation can be found here.

HTML Image Hitbox

The hitbox of the SVG imgI cant figure out how to get my Image to be the Hitbox of the image since it has curves and corners its not square.

I have tried it like this with svg tags aswell and it always ends up with the square hitbox I dont know how to continue. The Hitboxes should be the size of the IMG so that when i hover over it, it lights up

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="home.css">
    <script defer src="index.js"></script>
    <title>asdasd</title>
    
</head>
<body>
<div class="header">
    <div class="header-content">
        <div class="dropdown">
            <img src="../Icons/menu.png" class="menu">
            <div class="dropdown-content">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
        </div>
        <img src="Imgs/logo.jpeg" class="logo">
    </div>
    </div>
<main>
    <object type="image/svg+xml" data="Imgs/9wdpMq01.svg">
    </object>
    <img src="Imgs/Ebene-3-Kopie.svg" alt="Test">
   
</main>
</body>
Tags:

2

Answers


  1. 0

    you can use the <map> and <area>.

    <map name="customMap">
    <!-- Define the polygonal area coordinates for the hitbox -->
    <area shape="poly" coords="x1,y1,x2,y2,x3,y3,..." href="#" alt="Description">
</map>

    Replace the x1, y1, x2, y2, x3, y3, ... coordinates in the element with your SVG coordinates. Make sure to add shape="poly" to the area tag!

    Login or Signup to reply.
  2. 0

    If you can’t use an inline svg you can create a responsive clip-path and apply it to your <img> element.

    I concatenated all paths to a single compound path and used yoksel’s clip-path generator to get a scaled clip-path.

    body{
  background-color:#ccc;
  padding:1em;
}

img{
  width:70%;
  border: 1px solid red;
}

img {
  clip-path: url(#my-clip-path);
}

img:hover {
  opacity:0.5;
  cursor:pointer;
}
    <img id="exampleImg" src="data:image/svg+xml,<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><path d='M 51 0.01 A 50 50 0 0 1 84.641 13.945 L 63.418 35.169 A 20 20 0 0 0 51 30.025 z' fill='%23bacc33' class='segment segment-12_500 segment-1 '></path><path d='M 86.055 15.359 A 50 50 0 0 1 99.99 49 L 69.975 49 A 20 20 0 0 0 64.831 36.582 z' fill='%234fcc33' class='segment segment-12_500 segment-2 '></path><path d='M 99.99 51 A 50 50 0 1 1 49 0.01 L 49 30.025 A 20 20 0 1 0 69.975 51 z' fill='%23cc3333' class='segment segment-75_000 segment-3'></path></svg>">

<!-- hidden clip-path-->
<svg class="svg" style="position:absolute; width:0; height:0;">
  <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox"><path d="M0.51,0 A0.5,0.5,0,0,1,0.846,0.139 L0.634,0.352 A0.2,0.2,0,0,0,0.51,0.3 M0.861,0.154 A0.5,0.5,0,0,1,1,0.49 L0.7,0.49 A0.2,0.2,0,0,0,0.648,0.366 M1,0.51 A0.5,0.5,0,1,1,0.49,0 L0.49,0.3 A0.2,0.2,0,1,0,0.7,0.51" /></clipPath>
</svg>

    Further reading:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search