<p><strong>D3 is Not a SVG Polyfill:</strong>
Unlike Raphaël, which provides polyfill for SVG on browsers that do not support SVG. D3 manipulates SVG directly, without any abstraction layer. Your browser needs to support SVG for D3 to work properly.
(<a href="http://ruoyusun.com/2014/05/26/what-d3js-is-not.html" rel="nofollow">source</a>)</p>
<p>The D3.js strategy will likely work for your purposes and the elem selection method is similar to jQuery's CSS selection method but working directly with dom nodes, but for it to work you would need to directly embed your SVG data into the DOM like:</p>
<pre><code><!-- simple rectangle - replace this with your real svg data -->
<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)">
<p>Instead of using <code><object id="testSVG" data="image_library/grandstaff_drawing_only.svg" type="image/svg+xml" height=100% width=100%"></code></p>
<p>To manipulate SVG data in the DOM on the fly it has to be a part of the DOM and not opening / writing to / closing an external file.</p>
Get New Tutorials Delivered to Your Inbox
New tutorials will be sent to your Inbox once a week.