Можно узнать, поддерживает ли браузер файл & ldquo; svg & rdquo; формат, в противном случае, show & ldquo; png & rdquo ;? [Дубликат]

После болезненных экспериментов, чтобы найти что-то быстрее, чем принятый ответ, я получил это, чтобы работать. Он работал примерно в 100 раз быстрее в наборе данных, на котором я его пробовал.

Если кто-то знает способ сделать это более элегантным, обязательно измените мой код. Я не мог найти способ, который работает без установки других столбцов, которые вы хотите сохранить в качестве индекса, а затем сбросить индекс и переименовать столбцы, но я бы предположил, что есть что-то еще, что работает.

b = DataFrame(a.var1.str.split(',').tolist(), index=a.var2).stack()
b = b.reset_index()[[0, 'var2']] # var1 variable is currently labeled 0
b.columns = ['var1', 'var2'] # renaming var1
59
задан BoltClock 19 January 2012 в 14:53
поделиться

10 ответов

¡С элементом объекта!

<object data="example.svg" type="image/svg+xml">
     <!-- If browser don't soport / don't find SVG  -->
     <img src="example.png" alt="Logotype" />
</object>
5
ответ дан D.Bulten 27 August 2018 в 12:40
поделиться

Если я работаю с элементами <img> (в отличие от фоновых изображений CSS), я использую удобное обходное решение, комбинацию Modernizr (библиотека JavaScript, которая обнаруживает наличие определенных функций , например, поддержка .svg в браузерах) и несколько строк jQuery:

$(".no-svg img").each(function() {
    var $this = $(this);
    if ($this.attr("src").indexOf(".svg") > -1) {
        var isSvg = $this.attr("src").toString();
        var isPng = isSvg.replace(".svg", ".png");
        $this.attr("src", isPng);
    }
});

1) Я создаю .png версии каждого .svg-файла. 2) Modernizr предоставляет элементу html класс .no-svg, если он обнаруживает, что поддержка .svg отсутствует. 3) jQuery меняет местами расширения файлов. .indexOf(".svg") проверяет, содержится ли строка ".svg" в пределах значения src, возвращая -1, если она не находит его и положительное целое число, если оно выполняется. Если он найдет ".svg", вся цепочка src втягивается в isSvg, а .replace() свопы .svg для .png и сохраняет результат как isPng, который затем устанавливается как значение src.

3
ответ дан Danny 27 August 2018 в 12:40
поделиться

Все основные браузеры поддерживали годы, кроме & lt; = IE8. Обходной путь может быть, например, RaphaelJS.

Источники:

51
ответ дан Dylan Valade 27 August 2018 в 12:40
поделиться

Для фоновых изображений, вот простой способ отбросить фон PNG для старых браузеров:

http://signaltower.co/2013/02/25/add-png-fallbacks- имеющиеся в наличии для SVG-файлов /

0
ответ дан jlong 27 August 2018 в 12:40
поделиться

отредактировано: Я использовал ссылку на очень красивую таблицу сравнения SVG, но он не обновлялся с 2011 года, поэтому он больше не имеет отношения к делу.

9
ответ дан Kornel 27 August 2018 в 12:40
поделиться

... или вы можете разрешить серверу apache:

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} MSIE\s[5-8]\.
RewriteCond %{REQUEST_FILENAME} ^.+?\.svg$
RewriteRule ^(.+?)\.(?:svg)$ $1\.png [L]

вам нужно создавать только .png версии каждого .svg-файла, и не имеет значения, является ли файл для css background или для тега img.

11
ответ дан Louis 27 August 2018 в 12:40
поделиться

Вы можете использовать SVG в целом для всех изображений. Таким образом, вы будете покрывать все вещи сетчатки на iDevices. Другие устройства последуют рано или поздно.

Для браузеров, которые не поддерживают svg, вы можете дать телу класс «no-svg».

В вашем CSS просто добавьте '.no-svg .yourimageclass' и вместо этого поместите png. (переопределите его)

Boilerplate HTML5 дает вам этот класс no-svg уже по умолчанию с некоторой магией javascript. (например, для IE8)

3
ответ дан RedRoosterMobile 27 August 2018 в 12:40
поделиться

Стоит отметить, что если вам нужна поддержка & lt; = IE8, вы можете реализовать GoogleChromeFrame достаточно легко, чтобы получить поддержку SVG, которую вы ищете ...

Хотя вы можете обнаружить, что каждый браузер имеет их собственные небольшие причуды в отношении особенностей спецификации. У меня были проблемы с динамически создаваемыми узлами, которые используют фильтры, а animateMotion слишком долго искажен в Google Chrome ... (по этой причине мы используем FF5 + в качестве наших интерактивных интерфейсов, Safari тоже становится лучше)

IMO, если все приложение не является SVG, я бы просто использовал PNG для ваших значков, если вы не хотите, чтобы они красиво масштабировались! :)

... но если вы просто хотите играть с SVG, Giv'er! ;)

7
ответ дан RGB 27 August 2018 в 12:40
поделиться

Вы можете использовать скрипт caniuse.js , чтобы определить, поддерживает ли ваш браузер SVG или нет:

caniuse.svg()
0
ответ дан Simon East 27 August 2018 в 12:40
поделиться

Спецификация SVG обширна, и ни один браузер в настоящее время не поддерживает всю спецификацию. Говоря о , все последние версии всех основных браузеров имеют базовую поддержку SVG . Поскольку ни одна из них не имеет полной поддержки, вам нужно будет проверить отдельные функции в каждом браузере, на который настроен таргетинг.

Здесь можно найти полную матрицу совместимости браузера .

Обходным решением для старых версий IE является использование VML . Если требуется поддержка IE6 и вы рисуете код, тогда Raphael.js выполнит эту проверку совместимости для вас и сделает рендеринг с помощью VML или SVG, если это необходимо. Но если вы загружаете необработанный файл SVG и используете его как источник изображения, который не будет работать.

Другой вариант для старых браузеров - использовать библиотеку JavaScript canvg . Это чистый JavaScript-синтаксический анализатор SVG, который сделает результирующий образ на холсте, но это может быть излишним.

32
ответ дан sym3tri 27 August 2018 в 12:40
поделиться
Другие вопросы по тегам:

Похожие вопросы: