странное поведение use в процедурном svg

552

07 февраля 2017, 22:31

Вопрос про процедурный svg.

https://codepen.io/anon/pen/ggKKvp?editors=1010 Проблема с use: он перестает работать хотя, если смотреть по DOM, все правильно. В HTML комментировал нормальный SVG.

Если заменить use на rect всё прекрасно работает или немного изменить DOM в браузере например :viewBox="0 0 450 100" на viewBox="0 0 400 100". С чем такое связано не понимаю. Может как-то надо перерисовать?

defs.appendChild(rect.cloneNode(true))
svgg.appendChild(defs.cloneNode(true))
svgg.appendChild(use.cloneNode(true))
svgg.appendChild(use2.cloneNode(true))
svgg.appendChild(use3.cloneNode(true))

Answer 1

Проблема была проста на 21 строчке было:

if(i === 'href')

А нужно было заменить на:

if(i === 'xlink:href')

Как-то так.Простите что отвлек Вас.Спасибо всем.

Answer 2

Начните поиск ошибки в своем коде с того, что постарайтесь не использовать в именах переменных зарезервированные имена в SVG - rect, defs, тем более use очень специфичной команды, которая переводит создаваемый элемент в теневой ДОМ.

<svg id="svg1" version="1.1"  xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink" 
 width="450" height="100" viewBox="0 0 450 100" 
	 style="border:1px solid rgb(150,150,150);">	 
 
  <defs> 
  <rect id="def-rect" x="-25" y="-25" width="50" height="50" fill="#29e" />  
   
  </defs> 
   <use xlink:href="#def-rect" transform="translate(100 50)"></use> 
   <use xlink:href="#def-rect" transform="translate(200 50)"></use> 
   <use xlink:href="#def-rect" transform="translate(300 50)"></use> 
</svg>

Просто сравните с файлом на codepen