Блог

Главная - Вопросы по программированию - Получить атрибуты элемента use, определенные элементом defs, с помощью snap.svg

Получить атрибуты элемента use, определенные элементом defs, с помощью snap.svg

#svg #snap.svg

#svg #snap.svg

Вопрос:

Я новичок в svgs и совершенно новичок в snap.svg. Я работаю над созданием элементов в SVG, и мне нужно работать со следующим:

 <svg width="600" height="400" style="shape-rendering: geometricPrecision; position: absolute;
        left: 0; top: 0;">
        <defs>
            ...
            <circle id="dot" r="10" stroke-width="2"></circle>
        </defs>
    </svg>

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

 var dot = svg.use("dot");
var r = dot.attr("r");
dot.attr({ x: shapeData.X-r, y: shapeData.Y-r, class: "dot" });

но значение, которое я получаю для radius, r , равно null. Как я могу получить доступ к значениям, описывающим мой круг, например, r, ширина, высота, цвет заливки и т. Д.?

Ответ №1:

Способ работы элементов use в SVG заключается в том, что они в основном являются просто указателями на исходный объект. Если вы разместите клон этой точки на холсте с помощью use, у клона не будет определенного радиуса. Он указывает обратно на точку, которая имеет определенный радиус.

Мне не совсем понятно, что все, что вам нужно сделать, но я думаю, что правильный подход к этому — получить ссылку на dot, которую вы затем можете использовать для этой цели. Вы можете клонировать dot и добавить к нему другие атрибуты позже.

Помимо этого, вам просто не хватает многого из того, что вам нужно, но, возможно, это потому, что вы просто даете нам фрагмент.

Вот некоторый код:

 <svg id="svg" width="600" height="400" style="shape-rendering: geometricPrecision; position:absolute;left: 0; top: 0;">
<defs>
  <circle id="dot" r="10" stroke-width="2"></circle>
</defs>
</svg>

JS:

 // reference to svg
var svg=Snap('#svg')

// reference to dot, stored in a
var a=svg.select('[id="dot"]')

// what's the radius of a?
var r=a.attr('r')
alert('The radius is ' r)

// clone a and add it to the svg
b=a.use()
svg.append(b)

// give b some attributes
b.attr({x:100,y:50})
console.log(b.attr())

Скрипка здесь: https://jsfiddle.net/ksy7mLsx/1 /

Метки: