使用 JavaScript 创建 SVG 矢量

Question

我试图找到一种方法来创建 SVG 折线，其中每个点的“x”和“y”值被定义为 JavaScript 文件生成的值。 这些数字基于一系列具有 if/else 条件的随机变量。

我已经准备好用于绘制这些点的 JavaScript 文件，但我不知道将变量 id 链接到 SVG 脚本的正确方法。 这甚至可能吗，有谁知道如何做到这一点？

干杯。

Answer 1

试试这个

var svgns = "http://www.w3.org/2000/svg";
var svgDocument = evt.target.ownerDocument;
var shape = svgDocument.createElementNS(svgns, "circle");
shape.setAttributeNS(null, "cx", 25);
shape.setAttributeNS(null, "cy", 25);
shape.setAttributeNS(null, "r",  20);
shape.setAttributeNS(null, "fill", "green"); 

一个很好的创建 SVG 对象的教程，可以找到链接

Answer 2

SVG 是一个文档，而不是一个脚本。 脚本是一段可执行代码，通常使用 Javascript。

第一：获取SVG对象。 例如，如果您的 svg 嵌入在网页中：

var svg = document.getElementById("yourSVGObject"); /* If <svg id="yourSVGObject"> */

您可以通过以下方式创建一个新的 SVG 对象：

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttributeNS("width", "100%");
svg.setAttributeNS("height", "100%");
svg.setAttributeNS("viewBox", "0 0 200 200"); /* This is the SVG coordinate system: x, y, width, height */
document.body.appendChild(svg); /* To add the SVG object to the webpage. You could also add it inside a div, for example. */

向 SVG 对象添加多段线：

var polyline = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
polyline.style.fill = "none";
polyline.style.stroke = "#ff0000";
polyline.style.strokeWidth = "2px";
svg.appendChild(polyline);

要修改折线上的点，您需要一次性修改它们。 您必须提供一个字符串，而不是一组点：

polyline.setAttributeNS(null, "points", "10,10 90,20 170,50");

请注意，折线元素仅绘制线条。 如果您想在每个点上放置圆圈，则必须为每个点添加一个圆圈。

如果您已将点存储在数组中：

var polylinePoints = [];
var circles = []; /* Optional */
for(var i = 0; i < points.length; i++) {
    polylinePoints.push(points[i].x + ", " + points[i].y);
    var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    circle.setAttributeNS(null, "cx", points[i].x);
    circle.setAttributeNS(null, "cy", points[i].y);
    circle.setAttributeNS(null, "r", 8); /* This is the radius of the circle */
    circle.setAttributeNS(null, "class", "polylinePoint"); /* You can style individual shapes using CSS */
    circles.push(circle); /* Optional */
    svg.appendChild(circle);
}
polyline.setAttributeNS(null, "points", polylinePoints.join(" "));

您可以将每个圆圈存储在一个数组中，以防您以后需要修改或删除这些圆圈。

要删除单个形状，只需调用：

shape.remove(); /* e.g. circle[5].remove(); polyline.remove(); */

小提琴示例： https : //jsfiddle.net/locolis/hkLprw23/