Создание графики SVG использование JavaScript?

В настоящее время все главные браузеры svg поддержки. Создайте svg в JS, очень прост

element.innerHTML = `
    <svg viewBox="0 0 400 100" >
      <circle id="circ" cx="50" cy="50" r="50" fill="red" />
    </svg>
`;

function createSVG() {
  box.innerHTML = `
    <svg viewBox="0 0 400 100" >
      <circle id="circ" cx="50" cy="50" r="50" fill="red" />
    </svg>
  `;
}

function decRadius() {
  r=circ.getAttribute('r');
  circ.setAttribute('r',r*0.5);
}

<button onclick="createSVG()">Create SVG</button>
<button onclick="decRadius()">Decrease radius</button>
<div id="box"></div>

Посмотрите этот список в Википедии о том, какие браузеры поддерживают SVG. Он также предоставляет ссылки на более подробную информацию в сносках. Например, Firefox поддерживает базовый SVG, но на данный момент не имеет большинства функций анимации.

Учебное пособие о том, как создавать объекты SVG с помощью Javascript, можно найти здесь :

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"); 

Для кроссбраузерности я настоятельно рекомендую RaphaelJS . У него чертовски хороший API и VML в IE, который не понимает SVG.

Нет, не все браузеры поддерживают SVG. Я считаю, что IE нужен плагин для их использования. Поскольку svg - это просто XML-документ, JavaScript может их создавать. Однако я не уверен, что загружаю его в браузер. Я этого не пробовал.

Эта ссылка содержит информацию о javascript и svg:

http://srufaculty.sru.edu/david.dailey/svg/SVGAnimations.htm

Есть плагин jQuery, который позволяет вам управлять SVG через Javascript:

http: // плагины. jquery.com/project/svg

Из вступления:

Встроенная поддержка в Firefox, Opera, и Safari и через Adobe SVG просмотрщик или проигрыватель Renesis в IE, SVG позволяет отображать графику в вашем Веб-страница. Теперь вы можете легко водить холст SVG из вашего JavaScript код.

Этот ответ относится к 2009 г. Теперь это вики сообщества на случай, если кто-то захочет обновить его.

IE нужен плагин для отображения SVG. Наиболее распространенным является тот, который доступен для загрузки Adobe; однако Adobe больше не поддерживает и не разрабатывает его. Firefox, Opera, Chrome, Safari будут нормально отображать базовый SVG, но столкнутся с причудами, если используются расширенные функции, поскольку поддержка не завершена. Firefox не поддерживает декларативную анимацию.

Элементы SVG могут быть созданы с помощью javascript следующим образом:

// "circle" may be any tag name
var shape = document.createElementNS("http://www.w3.org/2000/svg", "circle");
// Set any attributes as desired
shape.setAttribute("cx", 25);
shape.setAttribute("cy", 25);
shape.setAttribute("r",  20);
shape.setAttribute("fill", "green");
// Add to a parent node; document.documentElement should be the root svg element.
// Acquiring a parent element with document.getElementById() would be safest.
document.documentElement.appendChild(shape);

Спецификация SVG описывает интерфейсы DOM для всех элементов SVG. Например, SVGCircleElement, созданный выше, имеет атрибуты cx , cy и r для центральной точки и радиуса, к которым можно получить прямой доступ. Это атрибуты SVGAnimatedLength, которые имеют свойство baseVal для нормального значения и свойство animVal для анимированного значения. На данный момент браузеры не поддерживают свойство animVal . baseVal - это SVGLength, значение которого задается свойством value .

Следовательно, для анимации сценария можно также установить эти свойства DOM для управления SVG. Следующий код должен быть эквивалентен приведенному выше коду:

var shape = document.createElementNS("http://www.w3.org/2000/svg", "circle");
shape.cx.baseVal.value = 25;
shape.cy.baseVal.value = 25;
shape.r.baseVal.value = 20;
shape.setAttribute("fill", "green");
document.documentElement.appendChild(shape);