Pregunta ¿Crear gráficos SVG usando Javascript?


¿Cómo puedo crear gráficos SVG usando Javascript?

¿Todos los navegadores son compatibles con SVG?


74
2018-06-23 19:37


origen


Respuestas:


Mira esto esta lista en Wikipedia sobre qué navegadores son compatibles con SVG. También proporciona enlaces a más detalles en las notas a pie de página. Firefox, por ejemplo, es compatible con SVG básico, pero en este momento carece de la mayoría de las funciones de animación.

Se puede encontrar un tutorial sobre cómo crear objetos SVG usando Javascript aquí:

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

32
2018-06-23 19:40



Esta respuesta es de 2009.

IE necesita un complemento para mostrar SVG. El más común es el que Adobe puede descargar; sin embargo, Adobe ya no lo admite ni lo desarrolla. Firefox, Opera, Chrome, Safari, todos mostrarán SVG básico bien, pero se encontrará con peculiaridades si se utilizan funciones avanzadas, ya que la compatibilidad es incompleta. Firefox no tiene soporte para la animación declarativa.

Los elementos SVG se pueden crear con javascript de la siguiente manera:

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

los Especificación SVG describe las interfaces DOM para todos los elementos SVG. Por ejemplo, SVGCircleElement, que se creó anteriormente, tiene cx, cyy r atributos para el punto central y el radio, a los que se puede acceder directamente. Estos son los atributos SVGAnimatedLength, que tienen una baseVal propiedad para el valor normal, y una animVal propiedad para el valor animado. Los navegadores en este momento no están confiando de manera confiable animVal propiedad. baseVal es un SVGLength, cuyo valor es establecido por el value propiedad.

Por lo tanto, para las animaciones de script, también se pueden establecer estas propiedades DOM para controlar SVG. El siguiente código debería ser equivalente al código anterior:

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

23
2018-06-26 17:54



Para hacerlo entre navegadores, lo recomiendo encarecidamente RaphaelJS. Tiene una buena API y hace VML en IE, que no puede entender SVG.


18
2018-06-24 19:06



Todos los navegadores modernos excepto IE admiten SVG

Aquí hay un tutorial que proporciona una guía paso a paso sobre cómo trabajar con SVG usando javascript:

Guiones SVG con JavaScript Parte 1: Círculo simple

Me gusta Boldewyn ya ha dicho si quieres

Para hacerlo entre navegadores, recomiendo encarecidamente RaphaelJS: rapaheljs.com

Aunque ahora mismo siento que el tamaño de la biblioteca es demasiado grande. Tiene muchas características excelentes, algunas de las cuales es posible que no necesites.


9
2018-04-26 20:18



me gusta jQuery SVG biblioteca mucho. Me ayuda cada vez que necesito manipular con SVG. Realmente facilita el trabajo con SVG desde JavaScript.


7
2017-09-05 15:04



No encontré ninguna respuesta compilada para crear un círculo y agregar para probar esto:

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>


4
2017-10-03 08:30



No, no todos los navegadores son compatibles con SVG. Creo que IE necesita un complemento para usarlos. Como svg es solo un documento xml, JavaScript puede crearlos. Aunque no estoy seguro acerca de cargarlo en el navegador. No he intentado eso.

Este enlace contiene información sobre javascript y svg:

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


2
2018-06-23 19:39



Hay un plugin jQuery que te permite manipular SVG a través de Javascript:

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

Desde su introducción:

Compatible nativamente con Firefox, Opera,   y Safari y a través de Adobe SVG   espectador o jugador de Renesis en IE, SVG   le permite mostrar gráficos dentro de su   Páginas web. Ahora puedes conducir fácilmente   el lienzo SVG desde su JavaScript   código.


2
2018-06-23 19:44



Puedes usar d3.js. Es fácil de usar y poderoso.

D3.js es una biblioteca JavaScript para manipular documentos basados ​​en datos. D3 te ayuda a dar vida a los datos usando HTML, SVG y CSS.


2
2017-09-12 07:43



Hay múltiples bibliotecas en gráficos SVG usando Javascript como: Snap, Raphael, D3. O puede interactuar directamente con SVG con javascript simple.

Actualmente, todas las versiones más recientes de los navegadores son compatibles con SVG v1.1. SVG v2.0 está en borrador de trabajo y es demasiado pronto para usarlo.

Este artículo muestra cómo interactuar con SVG usando Javascript y tiene referencias a enlaces para soporte de navegador. Interfaz con SVG


2
2018-03-19 09:47



IE 9 ahora es compatible con SVG 1.1 básico. Ya era hora, aunque IE9 todavía está muy por detrás del soporte de SVC de Google Chrome y Firefox.

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


0
2018-02-19 18:02