title: Angular material as foreignObject inside SVG
body: <p>My general purpose is to make a dynamic and very simple flowchart view. I use svg and angular material. I am trying to show angular material objects like (md-select, md-menu, md-button) inside SVG. After a quick research I saw it is possible with "foreignObject" tags.</p>
  
  <p>Secondly; I want to move all these elements at once inside SVG regarding mouse panning. So I use "viewBox" property.   </p>
  
  <p>In my sample;<br>
  I use "foreignObject" tag to show angular material "md-select" inside a svg element. </p>
  
  <p>I expect "md-select" to move when I change x and y values of viewBox property of svg element but it keeps its position while clickable area changes. </p>
  
  <p>When I try same scenario with html "select" it moves as I expect. But I can't do the same with angular material objects. (they visually stay in their original position but their click area goes another where regarding viexBox x-y values.)  </p>
  
  <pre><code>&lt;div ng-controller="MyCtrl"&gt;
  
     x: &lt;input ng-model="vbx"&gt;
     y: &lt;input ng-model="vby"&gt;
  
  &lt;svg id="processDesignPanel" viewBox="{{vbx}} {{vby}} 500 500" name="processDesignPanel" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800px" height="800px"&gt;
  
    &lt;foreignObject width="100" height="50" x="100" y="100"&gt;
      &lt;md-select placeholder="Assign to user" ng-model="userkey" style="width: 200px;"&gt;
        &lt;md-option ng-repeat="user in formusers"&gt;{{user}}&lt;/md-option&gt;
      &lt;/md-select&gt;
    &lt;/foreignObject&gt; 
  
    &lt;foreignObject width="100" height="50" x="100" y="200"&gt;
      &lt;select placeholder="Assign to user" ng-model="userkey" style="width: 150px;"&gt;
        &lt;option ng-repeat="user in formusers"&gt;{{user}}&lt;/option&gt;
      &lt;/select&gt;
    &lt;/foreignObject&gt;
  
  &lt;/svg&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>sample js</p>
  
  <pre><code>angular.module('MyApp', ['ngMaterial'])
  .controller('MyCtrl', function ($scope) {
      $scope.formusers=["ally","mike"];
  
  
      $scope.vbx=null;
      $scope.vby=null; 
  })
  </code></pre>
  
  <p><a href="https://jsfiddle.net/ErSe/990ekrqz/" rel="nofollow noreferrer">here is my fiddle.</a></p>