Проблемы использования тегов sfg в Safari 6

Question

Ссылка: http://jsfiddle.net/xkpeD/

или просто

<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg"    xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="50" cy="50" r="20" fill="pink" fill-opacity="0.5"/>
  <use xlink:href="#:example" x="20" y="20"/>
  <defs>
    <circle id=":example" cx="50" cy="50" r="20" fill="pink" fill-opacity="0.5"/>
  </defs>
</svg>​

Он отображается нормально во всех браузерах (IE9, Chrome, Firefox, Safari 5.1), но в новом Safari 6 отображается только 1 круг. Кажется, что все теги не отображаются в Safari 6.

Любая помощь, пожалуйста?

Answer 1

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

Замените на

Так:

<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg"    xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="50" cy="50" r="20" fill="pink" fill-opacity="0.5"/>
  <use xlink:href="#:example" x="20" y="20"></use>
  <defs>
    <circle id=":example" cx="50" cy="50" r="20" fill="pink" fill-opacity="0.5"/>
  </defs>
</svg>​

Answer 2

У меня была такая же проблема, ОП. Я решил это, выполнив 2 шага

1. Отделил <use> и <defs> в 2 разных <svg>'s (не уверен, если этот шаг необходим, также пришлось сделать это по другим причинам). Примечание, если <svg> только имеет <defs>, ты можешь использовать style="display: none;" чтобы он не занимал место в макете.

2. Переехал <svg> содержащий <defs> НАД <svg> содержащий <use> в моем HTML. Этот шаг имеет решающее значение.

Надеюсь это поможет. Необходим и работает для Safari версии 7.1.2 на сегодня, 19.12.14

Answer 3

Я использовал <use href=""> это было без проблем в Firefox / Chrome, но не в Safari. Поэтому я должен был изменить <use xlink:href=""> и это исправило мои проблемы с рендерингом в Safari.

Answer 4

Проверьте, используете ли вы правильный заголовок http-типа контента и обслуживаете ли ваш документ как допустимый XML. Больше информации в этом похожем вопросе.