Обработка браузеров, которые не выполняют SVG должным образом: лучший способ перенаправить / загрузить другую ссылку css / show redirection?

Question

У меня есть веб-страница, которую я сделал целиком как svg (кроме html для загрузки svg). Пока все хорошо, и вы можете увидеть это здесь (еще не завершено): http://kitandmarcin.us/svgcontainer.html (это для моей собственной свадьбы, поэтому «клиенту» все равно, что не все пользователи получают одинаковый опыт) .

Это прекрасно работает в Firefox, Safari и Chrome. Это в основном не работает в IE (включая IE9) или Opera. Я больше ничего не проверял.

Мой вопрос заключается в том, как лучше всего дать пользователям IE (и, я полагаю, Opera) либо (а) перенаправление на другую страницу, либо (б) показать им что-то еще (возможно, снимок экрана).

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

Answer 1

Он отлично работает в Opera 11 / Windows.

Вы должны подумать о том, чтобы просто сделать это в старом добром HTML / CSS - это не особенно сложный макет.

В качестве альтернативы, используйте JavaScriptродительская страница для перенаправления пользователей IE на статическую версию SVG в формате PNG.

IE8 просто не поддерживает SVG без плагина - javascript будет отлично работать на странице.Тем не менее, SVG должен работать в IE9, поэтому я не уверен, почему у вас нет.У меня еще нет IE9, поэтому я не могу проверить.

Answer 2

ForeignObject - это, вероятно, ответ, почему он не работает.Учитывая, что ваш svg довольно прост, я бы предложил удалить посторонние объекты и использовать вместо этого текст svg и элементы tspan.Это должно заставить его работать во всех браузерах.И, видя, как вы использовали inkscape для создания svg, он все равно мог бы сделать для вас все изменения линий и т. Д.

От другой ответ об элементах потока в inkscape:

Inkscape может генерировать <text> и <tspan> для вас довольно легко, просто не щелкайте и не перетаскивайте область, а вместо этого просто щелкните, где вы хотите текст и начните писать, затем нажмите return, где вы хотите новую строку.

Я не уверен, что IE9 поддерживает foreignObject.

Есть способ сделать автоматическое выравнивание в svg tiny 1.2, которое поддерживается в Opera, aОбходное решение может выглядеть примерно так: .Но чтобы получить IE9-совместимость, вам, вероятно, придется использовать text + tspan.