How to use drop-shadow on SVG?-CodePudding

I am using an SVG on top of an image to make that specific part of the image clickable, and I am trying to make if you hover on the svg region the drop-shadow property changes colour.

This is the Image

And this is the code I have written

<div >
      <svg version="1.1" viewBox="0 0 735 916">
        <image width="735" height="916" href={pathToImage}></image>{" "}
        <a href="/">
          <rect
            
            x="539"
            y="642"
            fill="#fff"
            opacity="0"
            width="166"
            height="174"
          ></rect>
        </a>
      </svg>
    </div>

CSS

.parent {
  width: 100%;
  max-width: 800px;
  height: auto;
  z-index: 1;
}

.child {
  transition: 0.4s;
  mix-blend-mode: lighten; /* work the best with the default black fill of svg shapes */
  cursor: pointer;
  z-index: 2;
}
.child:hover {
  -webkit-filter: drop-shadow(3px 3px 2px rgba(255, 162, 0, 0.876));
  filter: drop-shadow(3px 3px 2px rgba(255, 153, 0, 0.935));
}

I have used z-index to make sure the hover effect comes on top of the image. But this does not work and I am unable to figure out why.

I cannot put the child tag in svg tag because then the image is not responsive. As if you resize the image the image responds but the svg position on top remains intact.

How can I use the drop-effect here?

CodePudding user response：

The problem is that your rectangle has opacity="0" so it is invisible. Change that to opacity="1" and everything is fine.

Also, z-index hdoes not work with SVG elements.`

.parent {
  width: 100%;
  max-width: 800px;
  height: auto;
  z-index: 1;
}

.child {
  transition: 0.4s;
  mix-blend-mode: lighten; /* work the best with the default black fill of svg shapes */
  cursor: pointer;
}
.child:hover {
  -webkit-filter: drop-shadow(3px 3px 2px rgba(255, 162, 0, 0.876));
  filter: drop-shadow(3px 3px 2px rgba(255, 153, 0, 0.935));
}

<div >
  <svg version="1.1" viewBox="0 0 735 916">
    <image width="735" height="916" href="https://i.stack.imgur.com/PETyU.jpg"></image>
    <a href="/">
      <rect
        
        x="539"
        y="642"
        fill="#000"
        opacity="1"
        width="166"
        height="174"
      ></rect>
    </a>
  </svg>
</div>