Вопрос по svg, javascript, graphics – Создание SVG-графики с использованием Javascript?

77

Как я могу создать графику SVG, используя Javascript?

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

Вот ссылка для просмотра актуальных поддерживаемых браузеров.caniuse.com/#feat=svg Это определенно сохранено, чтобы использовать svg в настоящее время. Lukas
После 2 лет разработки svg можно сказать, что это хорошая вещь, но без полной поддержки со стороны всех основных браузеров его использование не хуже. Если вы запускаете новое приложение, выберите другой формат. Kamarey
Любой, кто читает этот вопрос и ответы, остерегается того, что многое изменилось с тех пор, как этот вопрос был задан еще в 2009 году, и теперь SVG изначально поддерживается всеми основными браузерами (не нужны полифилы)! Jeach

Ваш Ответ

12   ответов
0

хотя IE9 все еще сильно отстает от поддержки Google Chrome и Firefox SVG.

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

18

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

2

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

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

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

Supported natively in Firefox, Opera, and Safari and via the Adobe SVG viewer or Renesis player in IE, SVG lets you display graphics within your Web pages. Now you can easily drive the SVG canvas from your JavaScript code.

2

Вы можете использовать d3.js. Это простой в использовании и мощный.

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

4

Я не нашел ответа, поэтому, чтобы создать круг и добавить в 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>

2

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

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

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

0

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

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

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

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

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

32

Посмотри наэтот список в Википедии о том, какие браузеры поддерживают 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"); 
что такоеevt Вот?
svgns должно бытьvar svgns = "http://www.w3.org/2000/svg";.
Спасибо за ссылку. user123757
Эта ссылка мертва.
svgns не определено ...
9

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

Вот учебник, который предоставляет пошаговое руководство по работе с SVG с использованием JavaScript:

SVG Scripting with JavaScript Part 1: Simple Circle

подобноBoldewyn уже сказал, если хотите

To do it cross-browser, I strongly recommend RaphaelJS: rapaheljs.com

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

& quot; Все современные браузеры, кроме IE & quot ;? :)
эта ссылка не работает
Ни одна версия IE не является современной. В случае SVG IE (до версии v11) не поддерживает SMIL, поэтому забудьте о любой интересной анимации!
23
This answer is from 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);
Это больше не верно, и этот ответ должен быть обновлен или удален.
7

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

Похожие вопросы