2013-06-17 4 views
0

Я хотел бы показать несколько копий изображения SVG без повторного воспроизведения всего представления DOM несколько раз. Я пытался добиться этого с помощью svg:image элемента без удачиИспользуйте элемент изображения SVG для ссылки на SVG в DOM

<svg xmlns="http://www.w3.org/2000/svg" id="tiger1" viewBox="0 0 900 900" version="1.1" width="200" height="200"> 
    .... contents 
</svg> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="tiger2" version="1.1" width="200" height="200"> 
    <image xlink:href="url(#tiger1)" width="200" height="200" x="0" y="0"/> 
</svg> 

Проблема заключается в том, что кажется, что xlink:href всегда интерпретировать его значение в качестве ресурса, так он ищет файл с именем «URL (# tiger1)» ,

Есть ли способ использования image с местными рекомендациями DOM? Или есть другой способ повторения SVG, который существует только в DOM?

ответ

1

<image> для полных файлов, <use> для фрагментов, что-то вроде этого ...

<svg xmlns="http://www.w3.org/2000/svg" id="tiger1" viewBox="0 0 900 900" version="1.1" width="200" height="200"> 
    .... contents 
</svg> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="tiger2" version="1.1" width="200" height="200"> 
    <use width="200" height="200" x="0" y="0" xlink:href="#tiger1" /> 
</svg> 
+0

Спасибо. Я неправильно понял спецификацию и подумал, что «использование» не может использоваться для целых элементов. Элемент use работает для меня во всех браузерах, которые я пробовал, кроме Safari/Chrome на iOS, где не отображается изображение. Любая идея, почему это может быть? –

+0

Иногда это проблемы с блоком. Помните, что ширина и высота элемента SVG должны быть указаны в реальных единицах px, em, cm any. Когда вы не предоставляете реальные единицы, элемент будет угадывать, что вы имеете в виду - обычно CSS-пиксели. Кроме того, единицы внутри используемого элемента являются единицами виджетов и являются дополнительными преобразованиями в исходное содержимое, а не значениями замещения. Иногда ваш контент есть, он находится за пределами видимой области. –

+0

Это то, о чем я и думал сначала, но указание всего на px не работает. Кроме того, если я заменил на весь , я был связан с ним, это просто отлично, поэтому я не думаю, что он находился за пределами видимой области. Я в тупике, но я должен делать что-то неправильно ... кажется слишком экстремальным, чтобы быть ошибкой. –

Смежные вопросы