title: setting background image to dynamic svg data?
body: <p>Originally i had some inline svg which works as i wanted.</p>
  
  <pre><code>&lt;svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"&gt;
    &lt;defs&gt;
      &lt;pattern id="smallGrid" width="10" height="10" patternUnits="userSpaceOnUse"&gt;
        &lt;path d="M 10 0 L 0 0 0 10" fill="none" stroke="gray" stroke-width="0.5"/&gt;
      &lt;/pattern&gt;
      &lt;pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"&gt;
        &lt;rect width="100" height="100" fill="url(#smallGrid)"/&gt;
        &lt;path d="M 100 0 L 0 0 0 100" fill="none" stroke="gray" stroke-width="1"/&gt;
      &lt;/pattern&gt;
    &lt;/defs&gt;
    &lt;rect width="100%" height="100%" fill="url(#grid)" /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>and was nice because it was inline, i could do jQuery selectors on it to undate: Width/Height and the path.d attributes.</p>
  
  <p>in that way, it was an overlaid div, which didnt do what i wanted.</p>
  
  <p>Next step i was thinking to save it as an svg file, and then reference it:</p>
  
  <pre><code>&lt;div style="background-image:url('images/grid.svg');"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>which was PERFECT for me, because i took something already existing and gave it a background instead of having an entire new div with data.</p>
  
  <p>The issue though with the background image route, is that i cant dynamically adjust the Height/Width/ path.d attributes</p>
  
  <p>Is there a way such that i can get the best of both worlds?</p>
  
  <pre><code>background-image + being able to query and update the attributes?
  </code></pre>
  
  <p>Here is code i had originally for the inline set_gridSize function:</p>
  
  <pre><code>Form.set_gridSize = function (num) {
      num = Number(num);
      Form.gridSize = num;
  
      var defs = $("div.grid-for-gridlock &gt; svg &gt; defs");
      defs.children("#smallGrid").attr({ Height: num, Width: num });
      var path = defs.children("#smallGrid").children().attr("d");
      var arr = path.split(" ");
      arr[1] = num;
      arr[arr.length - 1] = num;
      path = arr.join(" ");
      defs.children("#smallGrid").children("path").attr("d", path)
      defs.children("#grid").attr({ Height: num * 10, Width: num * 10 });
      defs.children("#grid").children("rect").attr({ eight: num * 10, Width: num * 10 });
      var path = defs.children("#grid").children("path").attr("d");
      var arr = path.split(" ");
      arr[1] = num*10;
      arr[arr.length - 1] = num*10;
      path = arr.join(" ");
      defs.children("#grid").children("path").attr("d",path);
  }
  </code></pre>
  
  <p>Thanks! :)</p>
  
  <p><em>edit:</em>  I used <a href="https://stackoverflow.com/questions/14208673/how-to-draw-grid-using-html5-and-canvas-or-svg">how to draw grid using html5 and (canvas or svg)</a> as my source for figuring out SVG and html5 for grids.</p>