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?
With the open mode, you are able to access the shadowRoot property. With the closed mode, shadowRoot will return null and you won't be able to reach it from the outside. As you might guess, this is what presents challenges for most UI testing tools.
It can be toggled in the DevTools Settings under the "Elements" section. Uncheck the "Show User Agent Shadow DOM". This will at least hide away any Shadow DOMs created internally (like select elements.) I am unsure right away if it affects user-created ones, such as custom elements.
To enable shadow dom in chrome browser open Developer tools by Ctrl+Shift+I. Click on 3 vertical dots on the top right corner of dev tools before close button. Now click on settings there you will find “Show user agent shadow DOM” checkbox under the Elements section in General Tab.
You can't remove a shadow root once you add it. However, you can replace it with a newer one. As mentioned here, http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-301/, the newest shadow root "wins" and becomes the rendered root.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With