Jak mogę tworzyć grafiki SVG przy użyciu JavaScript?
Czy wszystkie przeglądarki obsługują SVG?
javascript
graphics
svg
user123757
źródło
źródło
Odpowiedzi:
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");
źródło
evt
. Zobacz odpowiedź themadmax na rozwiązanie, które działa.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
,cy
orazr
atrybuty punkt środkowy i promień, który może być bezpośrednio dostępne. Są to atrybuty SVGAnimatedLength, które mająbaseVal
właściwość dla wartości normalnej ianimVal
właściwość dla wartości animowanej. Obecnie przeglądarki nie obsługują tej usługi w sposób niezawodnyanimVal
.baseVal
jest SVGLength, której wartość jest ustawiana przezvalue
wł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);
źródło
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.
źródło
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:
Jak powiedział Boldewyn , jeśli chcesz
Chociaż teraz czuję, że rozmiar biblioteki jest zbyt duży. Ma wiele wspaniałych funkcji, z których niektóre mogą nie być potrzebne.
źródło
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.
źródło
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>
źródło
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
źródło
Istnieje wtyczka jQuery, która umożliwia manipulowanie SVG za pomocą JavaScript:
http://plugins.jquery.com/project/svg
Od jego wprowadzenia:
źródło
Możesz użyć d3.js. Jest łatwy w użyciu i potężny.
D3.js
to biblioteka JavaScript do manipulowania dokumentami na podstawie danych. D3 pomaga ożywić dane za pomocą HTML, SVG i CSS.źródło
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
źródło
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
źródło
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");
źródło
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> `;
Pokaż fragment kodu
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>
źródło