title: How to append an svg to an prexisting svg using d3.js?
body: <p>is it possible to append another svg to a preexisting svg parent using d3.js? </p>
  
  <p>I know that its possible by using an 'svg:image'-attribute.
  But unfortunately then i am loosing full control about the inner svg-child.</p>
  
  <p><em>The regarding dom node gets created by d3 but is not rendered and as a result the page stays blank.</em> </p>
  
  <p>Hope somebody can help, thx in advance :)</p>
  
  <p>Here's what I got:</p>
  
  <p><strong>Html CSS</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  #svg-main-wrapper {
      position: absolute;
      min-width: 100%;
      min-height: 100%;
      bottom: 0;
      padding: 0;
      margin: 0;
    }
    
    
    &lt;div id="svg-main-wrapper"&gt;
      &lt;div svg-container svg-src="svgContainer[0].url" position="svgContainer[0].position"&gt;
      &lt;/div&gt;    
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Javascript</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>angular.module('app', ['ui.bootstrap'])
    .directive('svgContainer', function() {
      return {
        restrict: 'A',
        template: function() {
          var parent = angular.element('body');
          return '&lt;svg class="svg-container" width="' + parent.width() + '" height="' + parent.height() + '" viewBox=" 0 0 ' + parent.width() + ' ' + parent.height() + '"preserveAspectRatio ="xMinYMax meet"&gt;&lt;/svg&gt;';
        },
        scope: {
          svgSrc: '=',
          position: '='
        },
        link: function(scope, element, attrs) {
  
          var parent = angular.element('#svg-main-wrapper');
  
          var x = 0;
          var y = parent.height() - 400;
  
          var svg = d3.select(element[0]);
          var g = svg.append('g');
  
          var innersvg = g.append('svg')
            .attr('xlink:href', scope.svgSrc)
            .attr('preserveAspectRatio', scope.position)
            .attr('width', parent.width())
            .attr('height', 400)
            .attr('transform', 'translate(' + x + ',' + y + ')');
  
        },
        replace: true
      };
    })
  
    .controller('ctrl', ['$scope', '$window', function($scope, $window) {
  
      $scope.svgContainer = [
        {
          id: 0,
          short_name: 'left',
          url: './images/complete.svg',
          position: 'none'
        }
        ];
    }]);</code></pre>
  </div>
  </div>
  </p>