How to use CSS background url to SVG inside the HTML file -
i'm trying link background: url(#myid);
, id svg element.
<svg id="myid"></svg>
is possible? doing wrong?
.spesial { width: 100px; height: 100px; background-image: url(#test); }
<svg id="test" xmlns="http://www.w3.org/2000/svg" width=100 height=100 viewbox="0 0 1500 1500"> <metadata>copyright (c) 2015 original authors @ fontello.com</metadata> <path transform="translate(0 500)" stroke="#a4e" d="m929 11v428q-18-20-39-37-149-114-238-188-28-24-46-38t-48-27-57-13h-2q-26 0-57 13t-48 27-46 38q-88 74-238 188-21 17-39 37v-428q0-8 6-13t12-5h822q7 0 12 5t6 13z m0 586v14t-1 7-1 7-3 5-5 4-8 2h-822q-7 0-12-6t-6-12q0-94 82-159 108-85 224-177 4-2 20-16t25-21 25-18 28-15 24-5h2q11 0 24 5t28 15 25 18 25 21 20 16q116 92 224 177 30 24 56 65t26 73z m71 21v-607q0-37-26-63t-63-27h-822q-36 0-63 27t-26 63v607q0 37 26 63t63 26h822q37 0 63-26t26-63z" /> </svg> <div class="spesial"> should there not background image here? </div>
i know can set data in link, not able reuse it. url
, <image href="pic.svg"
css styles have inline.
you can include svg base64 encode directly in css , reuse css-class.
.spesial { background: url("data:image/svg+xml;utf8,<svg...