raphael

Convert SVG polygon to path

Open your SVG in a web browser. Run this code: var polys = document.querySelectorAll(‘polygon,polyline’); [].forEach.call(polys,convertPolyToPath); function convertPolyToPath(poly){ var svgNS = poly.ownerSVGElement.namespaceURI; var path = document.createElementNS(svgNS,’path’); var pathdata=”M “+poly.getAttribute(‘points’); if (poly.tagName==’polygon’) pathdata+=’z’; path.setAttribute(‘d’,pathdata); poly.getAttributeNames().forEach(function(name){ if(name !== ‘points’) path.setAttribute(name, poly.getAttribute(name)) }) poly.parentNode.replaceChild(path,poly); } Using the Developer Tools (or Firebug) of the browser, use “Copy as HTML” (or … Read more

Programmatically creating an SVG image element with javascript

SVG native attributes (not including xlink:href) do not share the SVG namespace; you can either use just setAttribute instead of setAttributeNS, or use svgimg.setAttributeNS(null,’x’,’0′); for example. Here it is, working: http://jsfiddle.net/UVFBj/8/ Note that I changed your fiddle to properly use XHTML, so that SVG works nicely within it in all major browsers.

How to write a web-based music visualizer?

Making something audio reactive is pretty simple. Here’s an open source site with lots audio reactive examples. As for how to do it you basically use the Web Audio API to stream the music and use its AnalyserNode to get audio data out. “use strict”; const ctx = document.querySelector(“canvas”).getContext(“2d”); ctx.fillText(“click to start”, 100, 75); ctx.canvas.addEventListener(‘click’, … Read more

SVG re-ordering z-index (Raphael optional)

Gimme the Code! // move element “on top of” all others within the same grouping el.parentNode.appendChild(el); // move element “underneath” all others within the same grouping el.parentNode.insertBefore(el,el.parentNode.firstChild); // move element “on top of” all others in the entire document el.ownerSVGElement.appendChild(el); // move element “underneath” all others in the entire document el.ownerSVGElement.appendChild(el,el.ownerSVGElement.firstChild); Within Raphael specifically, it’s … Read more

How to access SVG elements with Javascript

Is it possible to do it this way, as opposed to using something like Raphael or jQuery SVG? Definitely. If it is possible, what’s the technique? This annotated code snippet works: <!DOCTYPE html> <html> <head> <title>SVG Illustrator Test</title> </head> <body> <object data=”alpha.svg” type=”image/svg+xml” id=”alphasvg” width=”100%” height=”100%”></object> <script> var a = document.getElementById(“alphasvg”); // It’s important to … Read more