2013-03-05 3 views
12

Я пытаюсь добавить изображение svg с расширением '.svg' для моей диаграммы (другое изображение svg, созданное с помощью d3).d3 добавить изображение с расширением svg

Это код:

d3.select("#chart1 svg") 
    .append("svg:image") 
    .attr("xlink:href", "img/icons/sun.svg") 
    .attr("width", 40) 
    .attr("height", 40) 
    .attr("x", 228) 
    .attr("y",53); 

Как вы можете видеть, я устанавливаю "XLink: HREF" атрибут, но d3 изменения это HREF в браузере:

<image href="img/icons/sun.svg" width="40" height="40" x="228" y="53"></image> 

В самом деле , этот код отлично работает, если я использую расширение png. Есть идеи?

+1

У меня проблемы с этим тоже. По-видимому, D3 удаляет префикс, если префикс является известным пространством имен. Здесь есть более подробная информация об пространствах имен: https://github.com/mbostock/d3/wiki/Namespaces –

+1

Пока атрибут добавляется с помощью 'setAttributeNS', он отлично работает во всех браузерах (и чтобы быть понятным, D3 делает это). Отсутствующий префикс самого атрибута действительно является проблемой только в том случае, если вы хотите, чтобы сериализация документа/элемента выполнялась определенным образом. –

+0

Похоже, что это все еще сегодня ... Кто-нибудь нашел решение до сих пор? –

ответ

14

Код должен работать как - здесь вы можете увидеть пример прикрепления .svg файл d3:

http://jsfiddle.net/am8ZB/

Не забывайте, что это возможно, картина на самом деле есть, но вы просто не можете увидеть это: вы должны проверить страницу с помощью инструментов разработчика браузера, чтобы увидеть, было ли изображение помещено вне области просмотра (например, из-за ваших значений x/y).

Дополнительная информация о #chart1 поможет в этом случае.