css - How can I add a svg as content on :before pseudo element of an element? -
this question has answer here:
i trying use svg inside content of :before
pseudo element.
for purpose, following question: is there way use svg content in pseudo element :before or :after cannot make work.
i have simple svg:
<svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>
and here have tried:
example 1: inserting svg on content attribute
#square{ background-color: green; width: 100px; height: 100px; } #square:before{ display: block; content: url("data:image/svg+xml;charset=utf-8,<svg height='100' width='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red' /></svg>"); background-size: 28px 28px; height: 28px; width: 28px; }
<div id="square"></div>
example 2: base64 encoding
#square{ background-color: green; width: 100px; height: 100px; } #square:before{ display: block; content: url("data:image/svg+xml;base64,phn2zybozwlnahq9ijewmcigd2lkdgg9ijewmci+pgnpcmnszsbjed0intaiign5psi1mcigcj0indaiihn0cm9rzt0iymxhy2siihn0cm9rzs13awr0ad0imyigzmlsbd0icmvkiiavpjwvc3znpg=="); background-size: 28px 28px; height: 28px; width: 28px; }
<div id="square"></div>
as can see, of examples not work sure missing something.
what doing wrong?
thanks in advance!
seems svg
tag needed more attributes.
#square{ background-color: green; width: 100px; height: 100px; } #square:before{ display: block; content: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100' width='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red' /></svg>"); background-size: 28px 28px; height: 28px; width: 28px; }
<div id="square"></div>
Comments
Post a Comment