Створення графіки SVG за допомогою Javascript?

Як я можу створити SVG-графіку за допомогою JavaScript?

Чи всі браузери підтримують SVG?

Погляньте на цей список у Вікіпедії про те, які браузери підтримують 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"); 

Ця відповідь від 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);

Щоб зробити це у переглядачі, я настійно рекомендую RaphaelJS . Він має чудово хороший API і робить VML в IE, який не може зрозуміти SVG.

Усі сучасні браузери, крім IE, підтримують SVG

Ось підручник, який надає покрокове керівництво щодо роботи з SVG за допомогою javascript:

Сценарії SVG з JavaScript Частина 1: Просте коло

Як уже сказав Болдевін , якщо хочете

Щоб зробити це у переглядачі, я настійно рекомендую RaphaelJS: rapaheljs.com

Хоча зараз я відчуваю, що розмір бібліотеки занадто великий. Він має безліч чудових функцій, деякі з яких вам можуть не знадобитися.

Мені дуже подобається бібліотека jQuery SVG . Це допомагає мені кожного разу, коли мені потрібно маніпулювати SVG. Це справді полегшує роботу з SVG з JavaScript.

Я не знайшов відповіді на відповідність, тому для створення кола та додавання до 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>

Не всі браузери підтримують SVG. Я вважаю, що IE потрібен плагін для їх використання. Оскільки svg - це лише документ xml, JavaScript може їх створювати. Однак я не впевнений у завантаженні його в браузер. Я цього не пробував.

Це посилання містить інформацію про javascript та svg:

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

Існує плагін jQuery, який дозволяє маніпулювати SVG через Javascript:

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

З його вступу:

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

Ви можете використовувати d3.js. Він простий у використанні та потужний.

D3.js- це бібліотека JavaScript для маніпулювання документами на основі даних. D3 допомагає оживити дані за допомогою HTML, SVG та CSS.

Існує декілька бібліотек графіки SVG, що використовують Javascript, наприклад: Snap, Raphael, D3. Або ви можете безпосередньо взаємодіяти з SVG за допомогою простого javascript.

На даний момент усі останні версії браузерів підтримують SVG v1.1. SVG v2.0 знаходиться у робочому проекті і занадто рано використовувати його.

Ця стаття показує, як взаємодіяти з SVG за допомогою Javascript, і містить посилання на посилання для підтримки браузера. Взаємодія з SVG

IE 9 тепер підтримує базовий SVG 1.1. Це був час, хоча IE9 все ще сильно відстає від підтримки Google Chrome та Firefox SVG.

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

Отже, якщо ви хочете створювати свої речі SVG поштучно в JS, тоді не просто використовуйте createElement(), вони не будуть малювати, використовуйте замість цього:

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

В даний час всі основні браузери підтримують svg . Створення Г в JS дуже простий ( в даний час innerHTML=...є досить швидко )

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>