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的多个实例。所以我有一些使用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的值为null。如何访问描述我的圆圈的值，如r，宽度，高度，填充颜色等？

Answer 1

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

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

除此之外，你只是错过了很多你需要的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())

在这里小提琴：https://jsfiddle.net/ksy7mLsx/1/

使用snap.svg

1 个答案: