Make .svg clickable

EmilySeville7cfg · Oct 18, 2021

Hello! Now I have the following index.html, style.css, image.svg respectively:

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class='clickable'  onclick="alert('.svg clicked')">
      <object data="image.svg"></object>
    </div>
  </body>
</html>

CSS:

.clickable {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}

object {
  width: 100%;
  pointer-events: none;
}

Code:

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="100" height="100">

  <style type="text/css">
    <![CDATA[
      circle:hover {
        stroke: #006600;
        fill:   #00cc00;
      }
    ]]>
  </style>

  <circle  cx="50" cy="50" r="50"/>
</svg>

I don't understand how to make my .svg change colors when I hover mouse on it.

EmilySeville7cfg · Oct 18, 2021

I don't know whether this is the best decision:

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div onclick="alert('Clicked!')"></div>
  </body>
</html>

CSS:

div {
  width: 31px;
  height: 29px;
  background-repeat: no-repeat;
  background-size: 62px 29px !important;
  background: url("./image.svg");
}

div:hover {
  background-position-x: -31px;
}

Code:

<svg
  viewBox="0 0 62 29"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <style type="text/css">
    <![CDATA[
    .sprite { display: none; }
    .sprite:target { display: inline; }
    ]]>
  </style>

  <path
    id="default"
    d="M15.1572 2L11.1355 10.2092L2 11.5329L8.61776 18.0026L7.03553 27L15.1579 22.6711L23.2796 27L21.7105 18.0033L28.3158 11.5336L19.2309 10.2092L15.1579 2H15.1572Z"
    fill="white"
    stroke="black"
    stroke-width="4"
    stroke-linejoin="round"
  />

  <path
    id="hover"
    d="M15.1572 2L11.1355 10.2092L2 11.5329L8.61776 18.0026L7.03553 27L15.1579 22.6711L23.2796 27L21.7105 18.0033L28.3158 11.5336L19.2309 10.2092L15.1579 2H15.1572Z"
    fill="gold"
    stroke="gold"
    stroke-width="4"
    stroke-linejoin="round"
    transform="translate(31, 0)"
  />
</svg>

Please tell me how this code can be enhanced.

Search

Search

Make .svg clickable

EmilySeville7cfg

New member

EmilySeville7cfg

New member

Similar threads