Tworzysz grafikę SVG za pomocą JavaScript?

80

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

Czy wszystkie przeglądarki obsługują SVG?

user123757
źródło
2
Po 2 latach rozwoju svg można powiedzieć, że to fajna rzecz, ale bez pełnego wsparcia ze strony wszystkich głównych przeglądarek nie jest gorzej używać. Jeśli zaczynasz nową aplikację, wybierz inny format.
Kamarey
31
Każdy, kto czyta to pytanie i odpowiedzi, pamiętaj, że wiele się zmieniło od czasu, gdy to pytanie zostało zadane w 2009 roku, a SVG jest teraz obsługiwany natywnie przez wszystkie główne przeglądarki (nie wymagają wypełniaczy)!
Jeach
1
Oto link, aby zobaczyć rzeczywiste obsługiwane przeglądarki. caniuse.com/#feat=svg Na pewno można bezpiecznie używać svg w dzisiejszych czasach.
Lukas Liesis

Odpowiedzi:

30

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"); 
schnaader
źródło
@Aculeo: Dzięki, naprawione.
schnaader
jakieś rozwiązanie dla Firefoxa?
Dinesh
1
Naprawdę powinieneś to wyjaśnić evt. Zobacz odpowiedź themadmax na rozwiązanie, które działa.
AldaronLau
24

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);
fuzzyTew
źródło
5
To już nie jest prawdą i tę odpowiedź należy zaktualizować lub usunąć.
David Mårtensson
18

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.

Boldewyn
źródło
9

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.

U.Ahmad
źródło
„Wszystkie nowoczesne przeglądarki oprócz IE”? :)
tuomassalo
2
Żadna wersja IE nie jest nowoczesna. W przypadku SVG, IE (do v11) nie obsługuje SMIL, więc zapomnij o ciekawych animacjach!
Zapasy Geek
7

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.

Bakhtiyor
źródło
5

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>

themadmax
źródło
2

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

kemiller2002
źródło
2

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.

Trevor Robinson
źródło
2

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

Phil
źródło
0

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");
OsamaBinLogin
źródło
-1

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

Kamil Kiełczewski
źródło