Использование JavaScript для создания векторов SVG

Question

Я пытаюсь найти способ создания полилинии SVG, где значения «x» и «y» для каждой точки определяются как значения, сгенерированные файлом JavaScript. Эти цифры основаны на ряде случайных величин с условиями if/else.

Я подготовил файл JavaScript для построения этих точек, но не знаю, как правильно связать идентификатор переменной с SVG-скриптом. Возможно ли это, и кто-нибудь знает, как это можно сделать?

Cheers.

Answer 1

Try с этим

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, можно найти link

Answer 2

A 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/locoluis/hkLprw23/