Question

我有2个svg容器，我想在两个容器中绘制不同的svg元素。让我们假设：

<div><svg height="100" width="100" id="svg1" class="svg"> </svg></div>
<div><svg height="100" width="100" id="svg2" class="svg"> </svg></div>

现在假设我想在第一个中绘制一个矩形，在javascript和snap.svg中使用id绘制第二个中的一行。我怎样才能实现它？

Answer 1

阅读snapsvg.io上的入门和文档部分，这应该是一项简单的任务。

  var s1 = Snap("#svg1");
  s1.rect(50, 50, 50, 50);

  var s2 = Snap("#svg2");
  var line = s2.line(50, 50, 100, 100);
  line.attr({
    stroke: "#000",
    strokeWidth: 5,
    strokeLinecap:"round"
  });

Answer 2

我只是用jsfiddle和一些解释稍微增强了@ctron的回复。

var s1 = Snap("#svg1")
,   s2 = Snap("#svg2")
// Create rect and save in a variable
,   rect = s1.rect(50, 50, 50, 50)
// Create line and save in a variable
,   line = s2.line(50, 50, 100, 100);

rect.attr({fill:"red"})

line.attr({
     stroke: "#0f0",
     strokeWidth: 5,
     strokeLinecap:"round"
  });

JSFiddle

使用javascript在不同的容器中绘制svg元素

2 个答案: