SVG в качестве фона CSS - PullRequest
Новая
       4

SVG в качестве фона CSS

6 голосов
/ 23 марта 2011

Я пытался заставить простой SVG-прямоугольник работать в качестве фона в IE9 или FF4, и ни один из них не работает для меня. Вот мой код: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<div style="height:99px;background-image: url('bar.svg')"></div>
<iframe src="bar.svg" height="99px"></iframe>
</body>
</html>

iframe показывает графику, а div - нет. Любые идеи, где я могу пойти не так?

Я нашел рабочий пример здесь : Но я не могу заставить это работать самостоятельно :( Это сводит меня с ума.

Спасибо за любую помощь.

Ответы [ 4 ]

8 голосов
/ 23 марта 2011

Спасибо всем за помощь.На самом деле это была проблема веб-сервера, когда обслуживался неправильный тип MIME для SVG, и это приводило к тому, что браузеры не отображались правильно.

Вот что исправило это для меня.

1-й, я переключился сВстроенный веб-сервер VS 2010 для IIS Express.Затем в своем веб-конфиге я добавил: 

<system.webServer>
    <staticContent>
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
    </staticContent>
</system.webServer>

Теперь все работает правильно.

3 голосов
/ 04 июня 2012

У меня была такая же проблема в Joomla! 2.5 работает на сервере Godaddy Linux.

После интенсивных исследований вот как я решил проблему:

Перейдите в корневой каталог вашей установки Joomla и найдите файл .htaccess (или htaccess.txt , если он еще не установлен)

Теперь добавьте эти строки в файл: 

AddType image/svg+xml svg
AddType image/svg+xml svgz

Остальное, используйте стандартные свойства CSS и HTML для рендеринга файла SVG.

1 голос
/ 23 марта 2011

Этот jsfiddle работает для вас?

http://jsfiddle.net/B3mnk/embedded/result/

Кстати, я добавил размер фона, чтобы сделать его красивым и большим.

0 голосов
/ 23 марта 2011

Некоторые статьи с примерами:

https://jwatt.org/svg/demos/xhtml-with-inline-svg.xhtml

http://helephant.com/2009/08/svg-images-as-css-backgrounds/

https://developer.mozilla.org/en/svg_in_html_introduction

http://www.broken -ссылки.com / 2010/06/08 / using-svg-in-background-image / - у этого варианта есть отступ от .png в нижней части статьи.

Сообщается как ошибка в Firefox:

https://bugzilla.mozilla.org/show_bug.cgi?id=231179

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...