SVG Sprite Pattern Not Working in D3
<p>I'm making a force-directed graph in D3 with nodes of countries and links that represent those countries' shared borders. I am trying to make each node (an svg rect) have the background image of the corresponding country's flag. I grabbed the image and offset pixel data from flag-sprites.com.</p>

<p>I am making a list of SVG patterns corresponding to the ID tag on each country and then trying to append that pattern to each rect element with the rect "fill:" attribute.</p>

<p>Here is my code:
<a href="http://codepen.io/thmsdnnr/pen/ObdQvM" rel="nofollow noreferrer">http://codepen.io/thmsdnnr/pen/ObdQvM</a></p>

<p>I'm a bit confused because when I use the inspector in Google Chrome, each of my pattern elements has the right ID, each rect has the full background image attached, as well as the appropriate "background-position" offset.</p>

<p>However, each node has the same background image flag. When I try to mock up the URL in the pattern into just normal HTML, it doesn't work either. Can someone see what's going wrong here? I feel like (hope at least) I'm somewhat close...but I'm stuck.</p>

<p>Here's a representative rect and svg pattern from the inspector:</p>

<pre><code>&lt;rect width="25" height="15" style="stroke: none; fill:
url(&amp;quot;#pattern_sy&amp;quot;); 
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" 
x="441.4816383268158" y="382.4837223692339"&gt;&lt;/rect&gt;

&lt;pattern width="25" height="15" id="pattern_sd"&gt;&lt;image
href="//raw.githubusercontent.com/thmsdnnr/learnyounode
/master/flags.png" display="inline-block" background-repeat="no-repeat"
style="background-position: -275px -165px;"&gt;&lt;/image&gt;&lt;/pattern&gt;
</code></pre>