background url怎么填充_在作为Background-Image时，修改SVG填充颜色

Placing the SVG output directly inline with the page code I am able to simply modify fill colors with CSS like so:

polygon.mystar {

fill: blue;

}​

circle.mycircle {

fill: green;

}

This works great, however I'm looking for a way to modify the "fill" attribute of an SVG when it's being served as a BACKGROUND-IMAGE.

html {

background-image: url(../img/bg.svg);

}

How can I change the colors now? Is it even possible?

For reference, here are the contents of my external SVG file:

width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve">

解决方案

I think the only way for you to do this is to serve your svg from some server side mechanism.

Simply create a resource server side that outputs your svg according to GET parameters, and you serve it on a certain url.

Then you just use that url in your css.

Because as a background img, it isn't part of the DOM and you can't manipulate it.

Another possibility would be to use it regularly, embed it in a page in a normal way, but position it absolutely, make it full width & height of a page and then use z-index css property to put it behind all the other DOM elements on a page.