2

Как использовать #bg в качестве фона section?

https://jsfiddle.net/42nn4b49/2/

div {
  width: 4em;
}

section {
  outline: 1px dotted red;
  width: 8em;
  height: 8em;
  background: url(#bg); /* не работает */
}
<div>
  <svg viewBox="-4 -4 8 8" id="bg">
    <circle r="4" />
  </svg>
</div>

<section></section>

PS: Этот вопрос на английском.

5
  • 1
    попробуй как-то так background: url(../img/name.svg); 7 окт 2016 в 11:50
  • @FrankSinatra, не, мне нужно именно из разметки.
    – Qwertiy
    7 окт 2016 в 11:55
  • там он костылем лепил, а чем тебе мой вариант не подходит? плюс он так как элемент страницы пилил 7 окт 2016 в 12:02
  • @FrankSinatra, у меня svg на d3.js собирается на странице. И надо её отправить в фон другого элемента.
    – Qwertiy
    7 окт 2016 в 12:04
  • ассоциация: stackoverflow.com/q/39916145/4928642
    – Qwertiy
    24 фев 2017 в 13:17

1 ответ 1

3

Ну если не подходит вариант со вставкой из внешнего svg файла background: url(../img/name.svg);, то svg можно вставлять инлайново, как пример

  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='10' /></svg>")  no-repeat;

Только нужно объявить структору svg через атрибут xmlns: xmlns='http://www.w3.org/2000/svg'

На счет того чтобы вставить DOM элемент в качестве background, я могу ошибаться, но вроде пока спецификация css не позволяет это сделать. При желании можно костыльнуть например так:

var section = document.querySelector("section");
value = "url('data:image/svg+xml;utf8," + document.querySelector("svg").outerHTML.replace(/\r|\n/g, '') + "')";
section.style.background = value;
div {
  width: 4em;
}

section {
  outline: 1px dotted red;
  width: 8em;
  height: 8em;
  /* background: url(#bg); устанавливается через js */
}
<div>
   <svg viewBox="-4 -4 8 8" xmlns="http://www.w3.org/2000/svg" id="bg">
       <circle r="4" />
   </svg>
</div>

<section class="section"></section>

Ну или вообще отказаться от этой идеи и абсолютно спозиционировать svg и section в одном родителе.

4
  • 1
    1. Так я уже поэкспериментировал: jsfiddle.net/42nn4b49/9 2. Что касается DOM-элемента в фон, есть -moz-element, но это только FF. 3. Я хотел, чтобы у меня dom-элемент сам синхронизировался с фоном при некоторых изменениях - придётся обойтись без этого... А вообще, спасибо за интересный вариант - гораздо интереснее, чем на SO.
    – Qwertiy
    7 окт 2016 в 13:04
  • Свойство *-element кажется на 4ую спецификацию перенесли. Оно вроде сейчас работает в chome и mozille. Было бы удобно его использовать
    – ArtResh
    7 окт 2016 в 13:08
  • developer.mozilla.org/ru/docs/Web/CSS/element - вроде только FF?
    – Qwertiy
    7 окт 2016 в 13:54
  • Да это я подтупил немного, не то свойство в caniuse глянул
    – ArtResh
    7 окт 2016 в 14:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.