0

When I embed an SVG inside an SVG in chrome, some issues occur. One of these issues is that I can't apply "filter: drop-shadow" on the child SVG, although this works fine on Firefox. It works on chrome when I apply it on the parent SVG.

Is it a bad habit to embed an SVG in an SVG, or there is something wrong with my code?

body {
  background: linear-gradient(
    rgb(155, 246, 255, 0.7),
    rgba(189, 178, 255, 0.9)
  );
  background-attachment: fixed;
}

.test1:hover {
  cursor: pointer;
  filter: drop-shadow(-3px 1px 24px rgba(40, 245, 4, 1));
  -webkit-filter: drop-shadow(-3px 1px 24px rgba(40, 245, 4, 1));
  -moz-filter: drop-shadow(-3px 1px 24px rgba(40, 245, 4, 1));
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>
  <body>
    <div>
      <svg height="200" viewBox="0 0 50 50">
        <g>
          <svg
            class="test1"
            height="200"
            xmlns="http://www.w3.org/2000/svg"
            version="1.1"
          >
            <rect class="7-1" x="0" y="0" height="100" width="100" />
          </svg>
        </g>
      </svg>
    </div>
  </body>
</html>

In this code if I apply the class "test1" to the parent SVG, It will work fineو, otherwise, it is not working at all on chrome but it's working on Firefox

Thanks a lot! <3

Jimmy
  • 27
  • 6
  • 1
    Does this answer your question? [Embed SVG in SVG?](https://stackoverflow.com/questions/5451135/embed-svg-in-svg) – Chris W. Dec 31 '20 at 15:35
  • Here is a screenshot of the result https://imgur.com/dYYhN9A – Jimmy Dec 31 '20 at 16:13
  • @ChrisW. I tried the solutions in this post, I included the nested SVG via Image element and the problem still exists. It works on Firefox but doesn't work on chrome. Thanks for your help! – Jimmy Dec 31 '20 at 17:18

1 Answers1

1

It is not that CSS filters are not working on nested SVG elements, they are currently work cross-browser only on outermost<svg> elements and fail for any child element. Only Firefox implements that part of the filter spec.

You can find that information on the Mozilla developer network page in the Browser compatibility section. For some reason, the information is missing on caniuse.com. It is always a good idea to check whether browsers implement features before using them, but also a sad truth that there is no rigorous documentation of SVG features across browsers.

How to apply a drop shadow to SVG content is described in SVG drop shadow using css3. But again, check carefully for support of features.

The use of nested <svg> is not a "bad habit", but you should only expect the usage defined in the 1.1 spec to have good support.

ccprog
  • 20,308
  • 4
  • 27
  • 44