Можно ли отобразить изображение SVG в качестве фона div с библиотекой JavaScript SVG?

Question

На странице HTML я хочу использовать изображение SVG в качестве фона в элементе div, с элементом pre с текстом поверх него (фон).Фоновое изображение должно масштабироваться с учетом div, сохраняя соотношение сторон.

Можно ли выполнить эту задачу с помощью одной из библиотек JavaScript SVG, например jQuery SVG / Raphaël / svgweb ?

Тип структуры, в которую я хотел бы добавить фоновое изображение:

<code><div>
  <pre>Some text...

Answer 1

Вы можете использовать изображение SVG в качестве фона CSS, если вы хотите поддерживать только последние браузеры, использовать background-size, чтобы масштабировать изображение и поддерживать соотношение сторон.Здесь изображение применяется непосредственно к pre, просто для демонстрации :

pre {
    outline: 2px dashed black;
    padding: 1em;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/8/84/Konqi_svg.svg);
    background-repeat: no-repeat;
    background-size: cover;
}

Если вы хотите поддерживать IE8 и FF3.6, вам придется прибегнуть кпозиционируемые элементы, как предлагает andrewmu.

Answer 2

Вы всегда можете обмануть и использовать position: absolute, чтобы поместить два div в одном месте.

Answer 3

Изображения SVG являются частью DOM, они не могут быть фоном div, вместо этого они являются элементом, подобным div.

Вы можете поместить изображение SVG позади прозрачного div, чтобы получить иллюзиюфона.Это просто подразумевает размещение вашего SVG и контента в нужном месте.

, чтобы получить масштабирование, вы должны использовать некоторую математику для поддержания соотношения сторон, это должно быть довольно легко, нужно учитывать соотношение слов.Это было бы ключом к тому, как это сделать.

РЕДАКТИРОВАТЬ

Похоже, я ошибся http://www.broken -links.com / 2010/06/08 / using-svg-in-background-image / это может быть фон.