xmlserializer удаляет xlink из xlink: html svg image tag - PullRequest
Новая
       4

xmlserializer удаляет xlink из xlink: html svg image tag

5 голосов
/ 24 января 2012

Я создаю интерфейс javascript для динамического добавления связанных изображений на карту классной комнаты. 

 //declare the xlink namespace in the svg header
 xmlns:xlink="http://www.w3.org/1999/xlink"
...
//the code to append the image
var temp = document.createElementNS(svgns,"image");
temp.setAttributeNS(null,"x","0");
temp.setAttributeNS(null,"y","0");
temp.setAttributeNS(null,"height","80");
temp.setAttributeNS(null,"width","40");
temp.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","roomlayouts/items/ cactus.svg");

Изображение добавляется и отображается на экране с такими тегами: 

<image x="0" y="0" height="80" width="40" xlink:href="roomlayouts/items/cactus.svg"></image>

Но как только я пропущу его через xmlserializer, чтобы сохранить файл, он удалит тег xlink с фронта: 

var svgDoc = document.getElementById('SVGMap');
var serializer = new XMLSerializer();
var xmlString = serializer.serializeToString(svgDoc.firstChild);

create: 

<image x="0" y="0" width="40" height="80" href="roomlayouts/items/cactus.svg"></image>

Это означаетSVG теряет кактусы.Есть идеи, как заставить xmlserializer сохранить префикс xlink?

===================================ПРИМЕЧАНИЕ: это была ошибка в webkit, которая теперь устранена.См. Обсуждение ниже для ссылки на отчет об ошибке

1 Ответ

4 голосов
/ 24 января 2012

Дальнейшее расследование

Я создал тестовый файл SVG на моем сервере , который:

  1. Имеет <image> с атрибутом href с правильно заданным пространством имен.
  2. Использует JS для создания нового <image>, используя setAttributeNS(xlinkNS,'xlink:href',…)
  3. Использует JS для создания нового <image>, используя setAttributeNS(xlinkNS,'href',…)
  4. Использует JS для клонирования исходного (действительного) <image> элемента.
  5. Наконец, сериализует XML и записывает результат.

Результаты в WebKit

Инструменты разработчика Safari и Chrome отображают DOM как: 

<image xlink:href="…" />
<image xlink:href="…" />
<image href="…" />
<image xlink:href="…" />

Однако, сериализация XML, записанная на консоль (что вы также получите, если щелкнете правой кнопкой мыши по Элементу и скажете «Копировать как HTML»), показывает это: 

<image xlink:href="…" />
<image xlink:href="…" />
<image href="…" xmlns="http://www.w3.org/1999/xlink" />
<image xlink:href="…" />

Результаты в Firefox

Firebug также показывает это для сгенерированного DOM: 

<image xlink:href="…" />
<image xlink:href="…" />
<image href="…" />
<image xlink:href="…" />

Однако консоль Firebug показывает разумную (ожидаемую) сериализацию: 

<image xlink:href="…" />
<image xlink:href="…" />
<image xlink:href="…" />
<image xlink:href="…" />

Дальнейшие исследования показывают, что даже если вы используете код, подобный: 

img.setAttributeNS(xlinkNS,'GLARBLE:href',…);

Firebug покажет «GLARBLE: href» в качестве имени атрибута, но сериализация XML использует URI для пространства имен, находит соответствующее пространство имен в корневом элементе <svg> и правильно выдает: 

<image xlink:href="…" />

Заключение

Похоже, что XML-сериализация, выполняемая Webkit, некорректна при использовании setAttributeNS для создания атрибута пространства имен без префикса пространства имен для имени атрибута.

Однако, если вы предоставите префикс пространства имен для имени атрибута, совпадающего с префиксом пространства имен, уже объявленным в вашем документе, сериализация будет работать правильно.

...