Создание графики SVG с помощью Javascript?

Как создать графику SVG с помощью Javascript?

Поддерживаются ли все браузеры SVG?

Ответы

Ответ 1

Посмотрите этот список в Википедии о том, какие браузеры поддерживают 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");

Ответ 2

Этот ответ с 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);

Ответ 3

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

Ответ 4

Все современные браузеры, кроме IE, поддерживают SVG

Вот учебник, в котором содержится пошаговое руководство по работе с SVG с помощью javascript:

SVG Scripting с JavaScript Часть 1: Простой круг

Как Boldewyn уже сказал, если вы хотите

Чтобы сделать это кросс-браузер, я настоятельно рекомендую RaphaelJS: rapaheljs.com

Хотя сейчас я чувствую, что размер библиотеки слишком велик. Он имеет много отличных функций, некоторые из которых вам могут не понадобиться.

Ответ 5

Мне нравится jQuery SVG библиотека. Это помогает мне каждый раз, когда мне нужно манипулировать с помощью SVG. Это действительно облегчает работу с SVG с JavaScript.

Ответ 6

Я не нашел ответа, поэтому для создания круга и добавления в svg попробуйте следующее:

var svgns = "http://www.w3.org/2000/svg";
var svg = document.getElementById('svg');
var shape = document.createElementNS(svgns, "circle");
shape.setAttributeNS(null, "cx", 25);
shape.setAttributeNS(null, "cy", 25);
shape.setAttributeNS(null, "r",  20);
shape.setAttributeNS(null, "fill", "green");
svg.appendChild(shape);

<svg id="svg" width="100" height="100"></svg>

Ответ 7

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

У этой ссылки есть информация о javascript и svg:

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

Ответ 8

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

http://plugins.jquery.com/project/svg

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

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

Ответ 9

Вы можете использовать d3.js. Он прост в использовании и эффективен.

D3.js - это библиотека JavaScript для управления документами на основе данных. D3 помогает вам воплощать данные в жизнь с помощью HTML, SVG и CSS.

Ответ 10

В SVG-графике есть несколько библиотек с использованием Javascript: Snap, Raphael, D3. Или вы можете напрямую связать SVG с простым javascript.

В настоящее время все последние версии браузеров поддерживают SVG v1.1. SVG v2.0 находится в рабочем проекте и слишком рано использовать его.

В этой статье показано, как взаимодействовать с SVG, используя Javascript, и ссылается на ссылки для поддержки браузера. Взаимодействие с SVG

Ответ 11

IE 9 теперь поддерживает базовый SVG 1.1. Пришло время, хотя IE9 по-прежнему сильно отстает от поддержки Google Chrome и Firefox SVG.

http://msdn.microsoft.com/en-us/ie/hh410107.aspx

Ответ 12

Итак, если вы хотите построить свой материал SVG по частям в JS, то не просто используйте createElement(), они не будут рисоваться, используйте это вместо:

var ci = document.createElementNS("http://www.w3.org/2000/svg", "circle");