SVG shadow-root is closed

Question

I have tried to animate an svg-sprite with CSS. I’ve created a sprite and injected it from gulp:

gulp.task('svgstore', function () {
var svgs = gulp
    .src('app/svg/*.svg')
    .pipe(svgmin(function (file) {
        return {
            plugins: [{
                cleanupIDs: {
                    minify: true
                }
            }]
        }
    }))        
    .pipe(svgstore({ inlineSvg: true }));

function fileContents (filePath, file) {
    return file.contents.toString();
}   

return gulp
    .src('app/*.html')
    .pipe(inject(svgs, { transform: fileContents }))
    .pipe(gulp.dest('app/'))
});

…and inserted images from the sprite to HTML:

<svg class="icon-ufo" >
    <use xlink:href="img/sprite.svg#ufo" aria-hidden="true"></use>
</svg>

And it works well, but the following image shows the shadow DOM is closed.

How I can to animate some styles of this SVG without JavaScript? But if JavaScript is the only way, how to do it better?

score 24 · Accepted Answer · answered Dec 10 '17 at 22:49

24

The DOM of the referenced element is not part of the DOM of the referencing HTML page. It has isolated style sheets.

But the shadow element inherits styles from the referencing <use> element. This means that as long as the referenced element does not set the styles itself in the sprite or in a style sheet associated with the sprite, you can change (and animate) every inheritable style property on the icon by styling the <use> element.

answered Dec 10 '17 at 22:49

ccprog

20,308
4
27
44

2

How about for __path__ attributes like _fill_? – yuяi Dec 21 '17 at 19:45
@yuяi `fill` is a [presentation attribute](https://www.w3.org/TR/SVG11/styling.html#UsingPresentationAttributes), meaning it can be written as an attribute, but is treated as if a style rule for the element was inserted at the beginning of the user stylesheets. – ccprog Dec 21 '17 at 22:09
Helpful response! @ccprog can you please tell me how I can change attributes like `radius` on my circle svg through the use tag? – mikasa Feb 25 '20 at 11:08
You cannot. The [`r`](https://www.w3.org/TR/SVG2/geometry.html#R) property is a geometry property that is not inherited. – ccprog Feb 25 '20 at 16:11
But as long as your intent is to change the dimensions of the circle, a `transform` attribute on the use element would achieve the same - almost, because a stroke would be scaled together with the overall size. – ccprog Feb 25 '20 at 16:18

score 9 · Answer 2 · answered May 31 '19 at 13:07

9

You could use "currentColor" property in your fill attribute to styling:

and styles for "icon-ufo" class will be like

.icon-ufo {
    color: green;
}

.icon-ufo:hover {
   color: red;
}

answered May 31 '19 at 13:07

Evgeniy Boytsov

214
2
8

1

Thanks Evgeniy. This is so simple and works like a charm. – Syed Arshad Jul 30 '21 at 07:40

Srivalli Gunturu · Answer 3 · 2023-05-06T12:13:59.843

0

I too have faced the same problem in firefox with svgs. svg icons are not displayed in firefox. found #shadow-root (closed) in dom tree. but found that svg closing tag was either in wrong place or altogether missing. please check.

edited May 06 '23 at 12:13

answered May 06 '23 at 12:13

Srivalli Gunturu

1
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 07 '23 at 19:57

SVG shadow-root is closed

3 Answers3

Linked