Всем привет! Спустя несколько лет перестали отображаеться svg через url data.
Раньше все работало, в коде ничего не менялось. Ниже привел стиль элемента из инструментов разработчика Chrome
background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" id="m1"><style>path,circle{stroke-linecap:round;stroke-linejoin:round}.a{stroke:#222}.a,.b{fill:none;stroke-width:2}.b{stroke:#59f}.c{stroke-width:6}</style><circle class="a" r="6.5" cy="71.95" cx="82.787"/><circle class="a" r="6.5" cy="11.098" cx="49.316"/><path class="a" d="M42.49 11.442c-22.965 4.815-37.04 28.892-28.52 54.08m7.777 12.41c15.187 16.483 43.71 15.372 57.23-.556"/><circle class="a" r="6.5" cy="72.217" cx="17.831"/><circle class="b c" r="12.5" cy="50" cx="50"/><path class="a b" d="M89.163 59.41c7.41-37.04-27.04-47.227-27.04-47.227M77.31 56.447C82.125 31.444 58.79 24.59 58.79 24.59"/></svg>')
В таком виде тоже не отображаются
<img style="height:4em;" src="data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" height="100" width="100"><defs><marker id="a" orient="auto" overflow="visible"><path class="c e i" d="M.508 0l-3.46 2v-4z"/></marker><marker id="b" orient="auto" overflow="visible"><path class="c e i" d="M.508 0l-3.46 2v-4z"/></marker></defs><style>circle,path,rect{stroke-linecap:round;stroke-linejoin:round}.a{fill:none}.b{fill:#e66}.c{fill:#777}.d{stroke:#e66}.e{stroke:#777}.f{paint-order:stroke fill markers}.g{cx:50;cy:50}.h{stroke-width:2}.i{stroke-width:.5}</style><circle class="a d f g" r="46.5" stroke-width="7"/><circle class="a f g" r="49.5" stroke="#555" stroke-width="1"/><path class="a d" d="M42.5 44.535v20.93M62.464 44.5h-9.928M52.5 44.535v20.93M62.464 54.5h-9.928" stroke-width="5"/><rect class="b e f" width="11" height="11" x="66" y="67" rx="3" ry="3" stroke-width="4"/><rect class="a e f h" width="13" height="13" x="21" y="21" rx="7" ry="7"/><path class="a e f h" d="M37.963 18.99a33.264 33.264 0 0 1 35.482 7.414 33.264 33.264 0 0 1 7.64 35.434" marker-end="url(#a)"/><path class="a e f h" d="M-61.835-82.277a33.264 33.264 0 0 1 35.274 7.67 33.264 33.264 0 0 1 7.512 35.306" transform="scale(-1)" marker-end="url(#b)"/><circle class="b f" cx="42.5" cy="37.5" r="2.5"/></svg>">
Есть идею, почему так?
Для того, чтобы вставлять SVG в url()
, требуется экранировать многие символы. Например, с помощью сервиса - URL-encoder for SVG
body {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' id='m1'%3E%3Cstyle%3Epath,circle%7Bstroke-linecap:round;stroke-linejoin:round%7D.a%7Bstroke:%23222%7D.a,.b%7Bfill:none;stroke-width:2%7D.b%7Bstroke:%2359f%7D.c%7Bstroke-width:6%7D%3C/style%3E%3Ccircle class='a' r='6.5' cy='71.95' cx='82.787'/%3E%3Ccircle class='a' r='6.5' cy='11.098' cx='49.316'/%3E%3Cpath class='a' d='M42.49 11.442c-22.965 4.815-37.04 28.892-28.52 54.08m7.777 12.41c15.187 16.483 43.71 15.372 57.23-.556'/%3E%3Ccircle class='a' r='6.5' cy='72.217' cx='17.831'/%3E%3Ccircle class='b c' r='12.5' cy='50' cx='50'/%3E%3Cpath class='a b' d='M89.163 59.41c7.41-37.04-27.04-47.227-27.04-47.227M77.31 56.447C82.125 31.444 58.79 24.59 58.79 24.59'/%3E%3C/svg%3E");
}
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Появилась задача - поместить SVG блок под блок описания, но так, чтобы он оказался ПОД блоком описанияВот что у меня вышло:
Здравствуйте дорогие друзья! Подскажите как сделать стилизация маркера списка (ul li) Слева должен быть блок с такими стилями