How to set SVG circle fill with SVG from CSS?

Question

So I tried variations of:

circle {
    stroke: black;
    //fill: brown;
    fill-opacity: .5;
    fill:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB3aWR0aD0nNScgaGVpZ2h0PSc1Jz4KCTxkZWZzPgoJCTxyYWRpYWxHcmFkaWVudCBpZD0nZ2xvdycgY3g9JzUwJScgY3k9JzUwJScgcj0nNTAlJyBmeD0nNTAlJyBmeT0nNTAlJz4KCQkJPHN0b3Agb2Zmc2V0PScxMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiMzZDNkM2Q7Jy8+CgkJCTxzdG9wIG9mZnNldD0nODAlJyBzdHlsZT0nc3RvcC1jb2xvcjojM2QzZDNkOycvPgoJCQk8c3RvcCBvZmZzZXQ9JzEwMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiNmZmZmZmY7IHN0b3Atb3BhY2l0eToxOycgLz4KCQk8L3JhZGlhbEdyYWRpZW50PgoJPC9kZWZzPgoJPHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsbD0ndXJsKCNnbG93KScvPgo8L3N2Zz4=');
}

yet I can not get a correct (or any fill) of SVG circle with predefined svg image. Is it possible from CSS or how to do it from js?

It seems like the common way to fill SVG with images is through Patterns, have you looked at that? Something like this: http://stackoverflow.com/questions/3796025/fill-svg-path-element-with-a-background-image — bbill, Jun 02 '14 at 18:09
This [SO question/answer](http://stackoverflow.com/questions/19202450/adding-an-image-within-a-circle-object-in-d3-javascript) deals specifically with patterns within a circle. — FernOfTheAndes, Jun 02 '14 at 21:26

score 2 · Answer 1 · answered Jun 02 '14 at 18:24

2

The fill value has to be a colour or a paint server (gradient or pattern). You can't just give it an image like that I'm afraid.

http://www.w3.org/TR/SVG11/painting.html#FillProperty

answered Jun 02 '14 at 18:24

Paul LeBeau

97,474
9
154
181

How to set SVG circle fill with SVG from CSS?

1 Answers1