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>
