CODEWITHSUNDEEP
javascriptcsssvggeometry
DuckQueen
DuckQueen

Reputation: 802

How to set SVG circle fill with SVG from CSS?

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?

Upvotes: 0

Views: 788

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

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

Upvotes: 2

Related Questions