使用 snap.svg 获取由 defs 元素定义的 use 元素的属性答案

【问题标题】：Get attributes of use element that are defined by defs element with snap.svg使用 snap.svg 获取由 defs 元素定义的 use 元素的属性
【发布时间】：2017-02-24 06:14:08
【问题描述】：

我是 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 的多个实例。所以我有一些像这样使用 snap.svg 的 javascript：

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

但我得到的半径值r 为空。如何访问描述我的圆圈的值，例如 r、宽度、高度、填充颜色等？

【问题讨论】：

标签： svg snap.svg

【解决方案1】：

使用元素在 SVG 中的工作方式是它们基本上只是指向原始对象的指针。如果您将该点的克隆放置在画布上使用，则克隆没有定义的半径。它指向具有定义半径的点。

我并不完全清楚您需要做什么，但我认为解决此问题的正确方法是获取对 dot 的引用，然后您可以将其用于此目的。您可以克隆 dot 并稍后为其添加其他属性。

除此之外，您只是缺少很多您需要的 Snap 东西，但也许那是因为您只是给了我们一个 sn-p。

这里有一些代码：

<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/

【讨论】：