Snap.load() внешний SVG не загружается

ПРОБЛЕМА: Я использую Snap.svg для создания базовой интерактивной графики, но по какой-то причине я не могу загрузить внешний файл SVG с помощью Snap.load(). Я вытащил код прямо из учебника на snap.io и проверил и дважды проверил документы. Мой SVG файл отлично отображен в браузере, он просто не отображается внутри Snap SVG. Другие формы (т.е. Не используются при использовании Snap.load()) отображают.

CODE: Я открутил свой пример до самых простых файлов HTML и SVG, которые можно себе представить, и метод Snap.load() все еще не работает для меня. Кто-нибудь видит, что мне не хватает?

HTML:

<head>
  <style media="screen">
            #svg {
                width: 300px;
                height: 300px;
            }
  </style>
  <script src="snap.svg-min.js"></script>
  <meta charset=utf-8 />
</head>
<body>
  <svg id="svg"></svg>
  <script type="text/javascript">
    var s = Snap("#svg");
    Snap.load("svgtest.svg");
  </script>
</body>

SVG (первоначально экспортированный из Illustrator):

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<rect x="14" y="33" fill="#2BB673" width="70" height="30"/>
</svg>

UPDATE: Обновлен код в соответствии с предложением @Ian -

var s = Snap("#svg");
Snap.load("http://www.w3.org/TR/SVG/images/struct/Use01.svg", onSVGLoaded ) ;

function onSVGLoaded( data ){ 
    s.append( data );
}

- но пока не отображается внешний SVG. Я попытался использовать SVG от w3.org, чтобы убедиться, что это не проблема с самим файлом или моим доменом.

Ответы

Ответ 1

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

var s = Snap("#svg");
Snap.load("svgtest.svg", onSVGLoaded ) ;

function onSVGLoaded( data ){ 
    s.append( data );
}

Изменить: могут быть некоторые проблемы с управлением доступом, если вы не получаете доступ с того же сервера, что и script, проверьте журнал консоли на наличие ошибок.

Ответ 2

У меня была именно эта проблема только в Internet Explorer, и оказалось, что файл SVG, который я загружал, был миниатюрным, из которого был удален doctype. Другие браузеры были в порядке без doctype, но оставляя doctype в исправленной проблеме в IE:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

В случае, как и я, вы используете Grunt для минимизации SVG, вы можете оставить doctype, добавив в свой файл Grunt следующий параметр:

svgmin: {
    options: {
        plugins: [
            { removeDoctype: false }
        ]
    }
    // etc...
}

Ответ 3

В дистрибутиве есть небольшая ошибка - см. https://github.com/adobe-webplatform/Snap.svg/issues/196. Рекомендуемое исправление работает правильно. Онлайн-демонстрация работает, потому что она ссылается на гораздо более старую сборку библиотеки.

Ответ 4

С установленной версией 0.5.1. Код в правильном ответе выше должен быть переписан следующим образом:

var s = Snap();
Snap.load("svgtest.svg", onSVGLoaded ) ;

function onSVGLoaded( data ){ 
    s.append( data );
}