Как использовать встроенный SVG в качестве фонового изображения? - PullRequest
Новая
       28

Как использовать встроенный SVG в качестве фонового изображения?

0 голосов
/ 22 февраля 2020 

<div class="svg-background"></div>

<svg id="svg-source" viewBox="0 0 24 16" fill="none">
    	<path d="M23.8475 7.18155C23.6331 6.88825 18.5245 0 11.9999 0C5.4753 0 0.36647 6.88826 0.152297 7.18127C-0.0507658 7.45952 -0.0507658 7.83691 0.152297 8.11517C0.36647 8.40846 5.4753 15.2967 11.9999 15.2967C18.5245 15.2967 23.6331 8.40842 23.8475 8.1154C24.0508 7.8372 24.0508 7.45952 23.8475 7.18155ZM11.9999 13.7143C7.19383 13.7143 3.03127 9.14243 1.79907 7.64782C3.02968 6.15189 7.18352 1.58241 11.9999 1.58241C16.8057 1.58241 20.968 6.15349 22.2007 7.6489C20.9701 9.14478 16.8163 13.7143 11.9999 13.7143Z" fill="#073255"/>
    </svg>

<style>
  .svg-background {
    height: 2em;
    width: 2em;
    background-image: url(#svg-source);
  }
</style>

Я пробовал со знаком # - но безрезультатно. Я хочу использовать встроенный SVG-файл в качестве фонового рисунка.

Мне нужно достичь 2 целей

  1. Избегать дублирования SVG-элемента на странице

  2. Избегайте внешнего SVG-изображения.

Есть идеи?

...