D3 Examples - sneaky SVG

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    #sneaky {
      position: absolute;
      left: -9999px;
    }
    .target { 
      width: 200px; 
      height: 200px;
      background-image: url('icons/curvy-line.svg');
            background-size: cover;
            padding: 0;
    }
    .target svg { width:100%; height: 100% }
  </style>
</head>
​
<body>
  <div class='target'></div>  
    <!-- svg icon is embedded into the DOM and hidden off the viewport  -->
  <svg id='sneaky' height="0" width="0">
      <path fill="#809D89" d="M2.8,24c0.8-0.9,1.5-1.8,2.2-2.7c0.9-1.2,2.4-1.7,3.4-2.8c1.2-1.2,0.5-0.9-0.6-2c-0.2-0.2-0.8,0.6-0.6-0.5
    c0.3-1.2,2-0.7,2.7-0.8c3.4-0.3,3.6-5.3,5.5-7.4c2-2.2,3.8-4.2,6.2-5.9c-0.5,0.7-1,1.5-1.8,2c1.5-1,2.7-2.2,4.3-3.1
    c-0.4,1-1.2,1.7-1.9,2.4c1-0.8,2-1.7,3.2-1.9c-0.6,0.9-1.6,1.5-2.4,2.2c1-0.5,2.1-1,3.2-1.2c-0.8,0.8-1.8,1.4-2.7,2.2
    c1.1-0.4,2.2-0.7,3.4-0.9c-0.9,0.8-2.1,1.1-3.1,1.8C25,5.1,26.1,4.9,27.2,5c-0.7,0.4-1.5,0.7-2.3,0.9c0.2,0,1-0.1,1.2,0
    c-0.4-0.4-2.7,4.5-2,4.2c-0.4,0.2-1,2.3-1.3,2.8c-0.3,0.5-0.6,0.7-0.9,1.2c0.1,0.2,0.1,0.3,0,0.5c-0.2,0-0.4,0.1-0.6,0.2
    c0.1,0.2,0.1,0.5,0,0.7c-0.2-0.1-0.3-0.1-0.5-0.1c-0.2,0.8-1.2,1.9-2,1.8c0.4,0,0.4,0.9-0.4,1c0.8,0.9,7.5,3.5,6.1,4.9
    c-0.9,0.9-2.5,0.1-3.6-0.4c-1.3-0.6-3.4-1.9-4.8-1.4c0.1,0,0.2,0.1,0.2,0.2c-0.2,0-0.4,0.1-0.6,0.1c0,0,0.5,0.3,0.4,0.4
    C15.9,22,15.6,22,15.3,22c0.6,0.5,0.2,0.3-0.2,0.6c0.1,0.1,0.2,0.2,0.1,0.3c-0.2,0.1-0.4,0.1-0.6,0c0.2,0.6,0,0.1-0.2,0.5
    c0.2-0.1-0.4,0.3-0.7,0.4c0.1,0.6-0.3,0.9-0.9,1c-0.2,0.8-1.8,0.9-2.6,1.3c-0.2,0.1-0.6,0.5-0.8,0.6C9.5,26.7,7.9,28,8.4,28
    c-0.2,0-0.6-0.7-0.7-0.9c0.1,0.8-0.1,1.5-0.7,2.1c-0.1-0.7-0.3-1.4-0.4-2.1c-0.1,0.6-0.4,1.2-0.7,1.7c-0.1-0.6-0.2-1.2-0.3-1.7
    c-0.2,0.5-0.4,0.6-0.7,0.9c-0.1-0.5-0.1-1-0.2-1.4c-0.1,0.1-0.2,0.2-0.4,0.3c-0.4-0.6-0.5-1.2-0.1-1.8c-0.7,0.2-1-0.2-0.6-0.8
    C3.3,24.4,2.7,24.3,2.8,24z"/>
        </svg>
 
  <script>
    
    // where to append the contents of our sneaky SVG
      var target = d3.select('.target');
    
    // make a new SVG element in our target div
    var svg = target.append('svg');
​
    // select our sneaky / hidden svg 
    var sneaky = d3.select('#sneaky');
    
    // get the sneaky svg's path
    var icon = sneaky.select('path');
        
    // add it to the target svg;
    var newIcon = svg.append('path')
        .attr({
        d: icon.attr('d'),
        fill: 'red',
        transform: 'scale(7)'
      });
    
  </script>
</body>
​
    