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 that you have read and understand our privacy policy and code of conduct.

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