Как получить SVG для рендеринга с прозрачностью в веб-комплекте?

Question

У меня проблемы с встраиванием SVG в веб-страницу. Я нашел самый простой способ просто использовать тег изображения. Например:

<img src="my_graphic.svg" height="100"/>

Работает в веб-комплекте. Мне не нужно явно устанавливать ширину, и браузер будет поддерживать соотношение сторон. Очень мило!

Это не работает в Firefox, хотя это не кросс-браузер. Так как насчет встраивания в качестве объекта?

<object type="image/svg+xml" 
        height="100"
        width="554"
        data="my_graphic.svgz">
        <span/></object>

На этот раз я использую svgz, а mime-тип был добавлен и вуаля! Работает как в Firefox, так и в WebKit. Тем не менее, в webkit мне нужно явно указать ширину, иначе мы получим несколько неприятных полос прокрутки с элементами Но что еще хуже, фон больше не прозрачен. Он отображается с белым фоном.

Так что один метод отлично работает в webkit. Другой прекрасно работает в Mozilla. Что я могу сделать, чтобы он работал надежно в обоих случаях?

Заинтересованы в демонстрации этого? Смотрите мою ссылку для справки: http://sumocreations.com/demo/svg/new_dttg.html

Answer 1

Я не верю, что в настоящее время <object> может иметь прозрачный фон в WebKit. Есть ошибка , поданная для этой проблемы. Я не знаю обходного пути.

Answer 2

Единственный обходной путь, который я нашел, заключался в том, чтобы определить, правильно ли отображается img, использующий источник SVG.Я делаю это, указывая только одно измерение.Либо высота, либо ширина, но не оба.Затем я могу проверить, является ли альтернативное измерение больше нуля.Если это я скрываю объект.Если нет, я скрываю изображение.Вот как это сделать с помощью jQuery:

<script type="text/javascript">
    $(document).ready( function() { 
        if($('img.logo').width() < 1) {
        $('img.logo').hide(); $('object.logo').show();
    } else {
         $('img.logo').show(); $('object.logo').hide();
        }
     });
</script>

См. Демонстрацию: http://sumocreations.com/demo/svg/new_dttg.html

Answer 3

Поместите тег <img> внутри вашего объекта.

Объект будет отображаться в Firefox, и в webkit должен отображаться тег <img>.

Edit:

Кроме того, что случилось с самозакрывающимся тегом span? <span> не поддерживает автоматическое закрытие.