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

Question

我是 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" });

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

Answer 1

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

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

除此之外，您只是遗漏了很多您需要的 Snap 内容，但这可能是因为您只是给了我们一个片段。

这是一些代码：

<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())

Fiddle 这里：https://jsfiddle.net/ksy7mLsx/1/

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

Get attributes of use element that are defined by defs element with snap.svg

svg

snap.svg