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?
Solution 1
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.
Solution 2
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;
}
Related videos on Youtube
09 : 41
How to fix the ‘ShadowRoot cannot be cast to org.openqa.selenium.WebElement’ error in selenium?
21 : 01
How to automate closed shadow dom which is inside open shadow dom | shadow root | selenium
35 : 06
How to handle #ShadowDom elements in Selenium || What is ShadowDom & ShadowRoot in DOM
16 : 49
How to handle closed shadow dom elements using Selenium | Automate Closed Shadow DOM
04 : 53
✔ Part 5: Can We Access A Closed Shadow DOM? | (Video 184)
01 : 15
SVG shadow-root is closed – CSS
Comments
-
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?
-
How about for path attributes like fill?
-
@yuяi
fillis a presentation attribute, 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. -
Helpful response! @ccprog can you please tell me how I can change attributes like
radiuson my circle svg through the use tag? -
You cannot. The
rproperty is a geometry property that is not inherited. -
But as long as your intent is to change the dimensions of the circle, a
transformattribute on the use element would achieve the same – almost, because a stroke would be scaled together with the overall size. -
Thanks Evgeniy. This is so simple and works like a charm.
Recents
I am not creating Shadow dom explicitly any where in code. But in Edge I see #shadow-root (Closed)==$0 .
Due to this svg graphic feature is not working .But in IE it working
IE HTML
<g xmlns=”http://www.w3.org/2000/svg” class=”taskpanel” id=”General_RecordApplicationInfoSubFlowchart_2_0″ data-bind=”event: { click: toggleTaskPanel, mouseover: mouseOver, mouseout: mouseOut }”>
<desc>Record Application Information</desc>
<g opacity=”1″ data-bind=”attr: { opacity: opacity }”>
<rect class=”taskcard” style=”cursor: pointer;” fill=”#ecebeb” stroke=”#61605d” x=”0″ y=”0″ width=”300″ height=”106″ rx=”10″ data-bind=”attr: { fill: fill, stroke: stroke }” data-originalwidth=”300″ data-originalheight=”106″ />
<line class=”taskcard” stroke=”#61605d” x1=”15″ y1=”0″ x2=”15″ y2=”106″ data-bind=”attr: { stroke: stroke }” />
<line class=”taskcard” stroke=”#61605d” x1=”285″ y1=”0″ x2=”285″ y2=”106″ data-bind=”attr: { stroke: stroke }” />
<text font-weight=”bold” style=”cursor: pointer;” text-anchor=”middle” x=”150″ y=”57″ data-originaly=”57″>Record Application Information</text>
<text class=”annotation” style=”cursor: pointer;” text-anchor=”start” x=”22″ y=”102″>Risk.Admin</text>
<image style=”” x=”267″ y=”2″ width=”16px” height=”16px” xmlns:xlink=”http://www.w3.org/1999/xlink” xlink:href=”/UI/ODI.Risk.UI/images/active.gif” data-bind=”visible: markComplete” />
</g>
<use class=”content” style=”display: none;” x=”40″ y=”50″ xmlns:xlink=”http://www.w3.org/1999/xlink” xlink:href=”#recordApplicationInformationWorkflow” />
</g>
Edge HTML
<use xlink:href=”#General_ProcessApplicationSubFlowchart_2_0″ x=”339″ y=”266″>
#shadow-root (Closed)==$0
<g id=”General_RecordApplicationInfoSubFlowchart_2_0″ class=”taskpanel” data-bind=”event: { click: toggleTaskPanel, mouseover: mouseOver, mouseout: mouseOut }”>
<desc>Record Application Information</desc>
<g opacity=”1″ data-bind=”attr: { opacity: opacity }”>
<rect class=”taskcard” x=”0″ y=”0″ rx=”10″ width=”300″ height=”106″ data-bind=”attr: { fill: fill, stroke: stroke }” fill=”#e5e5e5″ stroke=”#61605d”></rect>
<line class=”taskcard” x1=”15″ y1=”0″ x2=”15″ y2=”106″ data-bind=”attr: { stroke: stroke }” stroke=”#61605d”></line>
<line class=”taskcard” x1=”285″ y1=”0″ x2=”285″ y2=”106″ data-bind=”attr: { stroke: stroke }” stroke=”#61605d”></line>
<text x=”150″ y=”57″ text-anchor=”middle” font-weight=”bold”>Record Application Information</text>
<text class=”annotation” x=”22″ y=”102″ text-anchor=”start”>Risk.Admin</text>
<image x=”267″ y=”2″ width=”16px” height=”16px” xlink:href=”/UI/ODI.Risk.UI/images/active.gif” style=”” data-bind=”visible: markComplete”></image>
</g>
<use xlink:href=”#recordApplicationInformationWorkflow” class=”content” x=”40″ y=”50″ style=”display: none”></use>
</g>
</use>
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?
What does shadow root closed mean?
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.
How do you open a shadow root?
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.
How do I enable shadow DOM?
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.
How do you get rid of shadow roots?
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.
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;
}
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.
