CODEWITHSUNDEEP
csssvgbackground-image
DA.
DA.

Reputation: 40697

Can you modify a loaded SVG background-image with CSS?

We're using SVGs for the first time for our mobile HTML5 based app sprites file (they make dealing with retina an other screen size differences easy).

I know generated SVGs can be manipulated directly (as they are text files) but can one modify an SVG asset (in this case, a background image loaded via the CSS) via CSS or scripting?

For instance, can we load an all-black SVG object, and then change it to white?

Upvotes: 3

Views: 5068

Answers (1)

methodofaction
methodofaction

Reputation: 72465

You can't access the DOM of the SVG file if it's loaded as an image (either through img or background-image). You can't style it via CSS either.

If you intend to do these kind of manipulations you should append the SVG to a div. You should still be able to perform sprite-like manipulations to that div. You will be able to style it via CSS or javascript.

The SVG should be inlined. You can copy and paste the SVG into the div that used to contain background-image or load it there through an ajax request.

Instead of animating background-position you can animate with left or -webkit-transform: translate(...).

Upvotes: 6

Related Questions