¿Creando gráficos SVG usando Javascript?

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

¿Todos los navegadores admiten SVG?

Eche un vistazo a esta lista en Wikipedia sobre qué navegadores admiten SVG. También proporciona enlaces a más detalles en las notas al pie. Firefox, por ejemplo, admite SVG básico, pero por el momento carece de la mayoría de las funciones de animación.

Aquí puede encontrar un tutorial sobre cómo crear objetos SVG usando 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"); 

Esta respuesta es de 2009. Ahora es un wiki de la comunidad en caso de que a alguien le importe actualizarlo.

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 mostrarán todos los SVG básicos bien, pero se encontrarán con peculiaridades si se utilizan funciones avanzadas, ya que el soporte es incompleto. Firefox no admite 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);

La especificación SVG describe las interfaces DOM para todos los elementos SVG. Por ejemplo, el SVGCircleElement, que se crea por encima de, HA cx, cyy ratributos para el punto central y el radio, que se puede acceder directamente. Estos son los atributos SVGAnimatedLength, que tienen una baseValpropiedad para el valor normal y una animValpropiedad para el valor animado. Los navegadores en este momento no son compatibles con la animValpropiedad. baseVales un SVGLength, cuyo valor lo establece la valuepropiedad.

Por lo tanto, para las animaciones de secuencias de comandos, también se pueden configurar estas propiedades DOM para controlar SVG. El siguiente código debe 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);

Para hacerlo en varios navegadores, recomiendo encarecidamente RaphaelJS . Tiene una API increíblemente buena y tiene VML en IE, que no puede entender SVG.

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:

Scripting SVG con JavaScript Parte 1: Círculo simple

Como ya ha dicho Boldewyn si quieres

Para hacerlo en varios 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 quizás no necesite.

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

No encontré una respuesta cumplida, así que para crear un círculo y agregar a svg, intente 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>

No, no todos los navegadores admiten SVG. Creo que IE necesita un complemento para usarlos. Dado que svg es solo un documento xml, JavaScript puede crearlos. Sin embargo, no estoy seguro de cargarlo en el navegador. No lo he probado.

Este enlace tiene información sobre javascript y svg:

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

Hay un complemento de jQuery que le permite manipular SVG a través de Javascript:

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

De su introducción:

Compatible de forma nativa en Firefox, Opera y Safari y mediante el visor Adobe SVG o el reproductor Renesis en IE, SVG le permite mostrar gráficos en sus páginas web. Ahora puede manejar fácilmente el lienzo SVG desde su código JavaScript.

Puede utilizar d3.js. Es fácil de usar y potente.

D3.jses una biblioteca de JavaScript para manipular documentos basados ​​en datos. D3 le ayuda a dar vida a los datos mediante HTML, SVG y CSS.

Hay varias bibliotecas de gráficos SVG que utilizan Javascript como: Snap, Raphael, D3. O puede conectar directamente el SVG con JavaScript simple.

Actualmente, todas las últimas versiones 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 hace referencia a enlaces para compatibilidad con el navegador. Interfaz con SVG

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 Google Chrome y Firefox SVG.

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

Entonces, si desea construir su material SVG pieza por pieza en JS, entonces no solo use createElement(), esos no se dibujarán, use esto en su lugar:

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

Actualmente, todos los navegadores principales admiten svg . Crear svg en JS es muy simple (actualmente innerHTML=...es bastante rápido )

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>