Tworzysz grafikę SVG za pomocą JavaScript?

Jak mogę tworzyć grafiki SVG przy użyciu JavaScript?

Czy wszystkie przeglądarki obsługują SVG?

Spójrz na tę listę w Wikipedii, aby dowiedzieć się, które przeglądarki obsługują SVG. Zawiera również linki do dalszych szczegółów w przypisach. Na przykład Firefox obsługuje podstawowe pliki SVG, ale w tej chwili brakuje większości funkcji animacji.

Samouczek dotyczący tworzenia obiektów SVG za pomocą JavaScript można znaleźć tutaj :

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

Ta odpowiedź pochodzi z 2009 roku. Teraz wiki społeczności na wypadek, gdyby ktoś chciał ją zaktualizować.

IE potrzebuje wtyczki do wyświetlania SVG. Najpopularniejsza jest ta dostępna do pobrania przez Adobe; jednak Adobe już go nie obsługuje ani nie rozwija. Firefox, Opera, Chrome, Safari będą wyświetlać podstawowe SVG dobrze, ale będą miały dziwactwa, jeśli używane są zaawansowane funkcje, ponieważ obsługa jest niekompletna. Firefox nie obsługuje deklaratywnej animacji.

Elementy SVG można tworzyć za pomocą javascript w następujący sposób:

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

Specyfikacja SVG opisuje interfejsy DOM dla wszystkich elementów SVG. Na przykład, SVGCircleElement, który jest utworzony powyżej, zawiera cx, cyoraz ratrybuty punkt środkowy i promień, który może być bezpośrednio dostępne. Są to atrybuty SVGAnimatedLength, które mają baseValwłaściwość dla wartości normalnej i animValwłaściwość dla wartości animowanej. Obecnie przeglądarki nie obsługują tej usługi w sposób niezawodny animVal. baseValjest SVGLength, której wartość jest ustawiana przez valuewłaściwość.

Dlatego w przypadku animacji skryptów można również ustawić te właściwości DOM, aby sterować SVG. Poniższy kod powinien być odpowiednikiem powyższego kodu:

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

Aby to zrobić w różnych przeglądarkach, zdecydowanie polecam RaphaelJS . Ma cholernie dobre API i obsługuje język VML w IE, który nie może zrozumieć SVG.

Wszystkie nowoczesne przeglądarki oprócz IE obsługują format SVG

Oto samouczek, który zawiera przewodnik krok po kroku, jak pracować z SVG przy użyciu javascript:

Skrypty SVG w JavaScript Część 1: Proste koło

Jak powiedział Boldewyn , jeśli chcesz

Aby to zrobić w różnych przeglądarkach, gorąco polecam RaphaelJS: rapaheljs.com

Chociaż teraz czuję, że rozmiar biblioteki jest zbyt duży. Ma wiele wspaniałych funkcji, z których niektóre mogą nie być potrzebne.

Bardzo lubię bibliotekę SVG jQuery . Pomaga mi za każdym razem, gdy muszę manipulować przy użyciu SVG. To naprawdę ułatwia pracę z SVG z JavaScript.

Nie znalazłem zgodnej odpowiedzi, więc aby utworzyć krąg i dodać do svg, spróbuj tego:

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>

Nie, nie wszystkie przeglądarki obsługują format SVG. Uważam, że IE potrzebuje wtyczki, aby z nich korzystać. Ponieważ svg jest tylko dokumentem xml, JavaScript może je utworzyć. Nie jestem jednak pewien, czy załadować go do przeglądarki. Nie próbowałem tego.

Ten link zawiera informacje o javascript i svg:

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

Istnieje wtyczka jQuery, która umożliwia manipulowanie SVG za pomocą JavaScript:

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

Od jego wprowadzenia:

Obsługiwany natywnie w przeglądarkach Firefox, Opera i Safari oraz przez przeglądarkę Adobe SVG lub odtwarzacz Renesis w IE, SVG umożliwia wyświetlanie grafiki na stronach internetowych. Teraz możesz łatwo sterować kanwą SVG z kodu JavaScript.

Możesz użyć d3.js. Jest łatwy w użyciu i potężny.

D3.jsto biblioteka JavaScript do manipulowania dokumentami na podstawie danych. D3 pomaga ożywić dane za pomocą HTML, SVG i CSS.

Istnieje wiele bibliotek graficznych SVG używających JavaScript, takich jak: Snap, Raphael, D3. Lub możesz bezpośrednio połączyć SVG za pomocą zwykłego javascript.

Obecnie wszystkie najnowsze wersje przeglądarek obsługują format SVG 1.1. SVG v2.0 jest w wersji roboczej i jest za wcześnie, aby go używać.

Ten artykuł pokazuje, jak korzystać z SVG przy użyciu JavaScript i zawiera odniesienia do linków do obsługi przeglądarki. Współpraca z SVG

Przeglądarka IE 9 obsługuje teraz podstawowe SVG 1.1. Najwyższy czas, chociaż IE9 nadal jest daleko w tyle za obsługą Google Chrome i Firefox SVG.

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

Więc jeśli chcesz zbudować swoje elementy SVG kawałek po kawałku w JS, nie używaj ich createElement(), te nie będą rysować, użyj zamiast tego:

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

Obecnie wszystkie główne przeglądarki obsługują format SVG . Tworzenie svg w JS jest bardzo proste (obecnie innerHTML=...jest dość szybkie )

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>