how to change svg text tag using javascript innerHTML
SVG nodes don’t have a innerHTML property (they’re not HTML). Use textContent instead: t.node.textContent=”dddd”
svg
Scripting data in SVG (reading and modifying)
It sounds like you may have four questions: How do I embed script inside an SVG file? How do I run script inside an SVG file? How do I access data for a <path> element from script? How can I manipulate data for a <path> element from script? Let’s tackle them one at a time: … Read more
Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)
SMIL support was not removed from Chrome but was replaced with a Polyfill. Eric Willigers has created a SMIL polyfill implemented entirely on the Web Animations API. You can find it here: https://github.com/ericwilligers/svg-animation
d3.js Map () Auto Fit into Parent Container and Resize with Window
COMPLETE SOLUTION: Here’s the solution which will resize the map AFTER the user has released the edge of the window to resize it, and center it in the parent container. <div id=”mapContainer”></div> function draw(ht) { $(“#mapContainer”).html(“<svg id=’map’ xmlns=”http://www.w3.org/2000/svg” width=”100%” height=”” + ht + “”></svg>”); map = d3.select(“svg”); var width = $(“svg”).parent().width(); var height = ht; … Read more
Inkscape command line: Need to convert SVG to eps without filter rasterisation
The command I had to use to fix this problem was inkscape in.svg -E out.eps –export-ignore-filters –export-ps-level=3 where in.svg is your image and out.eps is the eps that comes out. Edit As suggested by Vladimir in comments, newer versions of inkscape doesn’t have -E option, so need to replace it with -o.
Display SVG in IPython notebook from a function
You need to display the SVG like from IPython.display import SVG, display def show_svg(): display(SVG(url=”http://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg”)) You first example works as the SVG object returns itself an is subsequently displayed by the IPython display machinery. As you want to create your SVG object in a custom method, you need to take care of the displaying. The … Read more
Mobile Safari SVG Problem
Add xmlns=”http://www.w3.org/2000/svg” version=”1.1″ to your svg tag. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en-us”> <head> <title>SVG iPhone Test</title> </head> <body > <svg width=”500″ height=”220″ xmlns=”http://www.w3.org/2000/svg” version=”1.1″> <rect x=”2″ y=”2″ width=”496″ height=”216″ stroke=”#000″ stroke-width=”2px” fill=”transparent”></rect> </svg> </body> </html> The HTTP MIME type being delivered by http://www.invalidpage.com/svg/svgtest.html is “Content-Type: text/html”. HTML inline svg … Read more
Why nest an element inside another element?
Nesting SVG elements can be useful to group SVG shapes together, and position them as a collection. All shapes nested inside an svg element will be positioned (x, y) relative to the position (x, y) of its enclosing svg element. By moving the x and y coordinates of the enclosing svg element, you move all … Read more
SVG click events not firing/bubbling when using element
Use pointer-events: none; on the svg. It worked for me. The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way … Read more
Including JavaScript in SVG
Here is a working version as I would write it: <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”> <svg version=”1.1″ xmlns=”http://www.w3.org/2000/svg”> <circle cx=”250″ cy=”250″ r=”50″ fill=”red” /> <script type=”text/javascript”><![CDATA[ var KEY = { w:87, a:65, s:83, d:68 }; var moveSpeed = 5; var circle = document.getElementsByTagName(“circle”)[0]; var x = circle.getAttribute(‘cx’)*1, y = circle.getAttribute(‘cy’)*1; document.documentElement.addEventListener(‘keydown’,function(evt){ switch (evt.keyCode){ … Read more