Как создать графику SVG с помощью Javascript?
Поддерживаются ли все браузеры SVG?
Создание графики SVG с помощью Javascript?
Ответ 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:
Как 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.
Ответ 12
Итак, если вы хотите построить свой материал SVG по частям в JS, то не просто используйте createElement(), они не будут рисоваться, используйте это вместо:
var ci = document.createElementNS("http://www.w3.org/2000/svg", "circle");