SVG内の外部オブジェクトとしての角度オブジェクト

Question

私の汎用目的は、動的で非常に簡単なフローチャートビューを作成することです。私はsvgと角度のある素材を使います。私は、SVGの中に（md-select、md-menu、md-button）のような角度のある素材オブジェクトを表示しようとしています。速い研究の後、私はそれが "foreignObject"タグで可能であることを見た。

2番目。マウスパニングに関してSVGの中でこれらの要素を一度に移動したい。だから私は "viewBox"プロパティを使用します。

私のサンプルでは;
"foreignObject"タグを使用して、svg要素内に角材 "md-select"を表示します。

svg要素のviewBoxプロパティのxとyの値を変更すると「md-select」が移動すると予想されますが、クリック可能な領域が変更されても位置は保持されます。

私はhtmlで同じシナリオを試してみると、 "select"は期待どおりに動きます。しかし、角度のある素材オブジェクトでは同じことをすることはできません。 （彼らは視覚的に元の位置にとどまるが、そのクリック領域がviexBox xyの値についての別の場所になります。）

<div ng-controller="MyCtrl"> 

    x: <input ng-model="vbx"> 
    y: <input ng-model="vby"> 

<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"> 

    <foreignObject width="100" height="50" x="100" y="100"> 
    <md-select placeholder="Assign to user" ng-model="userkey" style="width: 200px;"> 
     <md-option ng-repeat="user in formusers">{{user}}</md-option> 
    </md-select> 
    </foreignObject> 

    <foreignObject width="100" height="50" x="100" y="200"> 
    <select placeholder="Assign to user" ng-model="userkey" style="width: 150px;"> 
     <option ng-repeat="user in formusers">{{user}}</option> 
    </select> 
    </foreignObject> 

</svg> 

</div> 

サンプルJS

angular.module('MyApp', ['ngMaterial']) 
.controller('MyCtrl', function ($scope) { 
    $scope.formusers=["ally","mike"]; 


    $scope.vbx=null; 
    $scope.vby=null; 
}) 

here is my fiddle.

Answer 1

これは完全な解決策ではありません、しかし、私はそれがその方向のカップルステップだと思う。私は間違って配置されたMDの選択と正しく配置された通常の選択を表示するためにあなたのフィドルを減らし、md-select-valueタグのスタイルをposition：inheritとz-index：autoのように変更するボタンでMD選択が正しい場所に表示されます。私はlibのCSSに掘り下げなかったので、なぜこれを行うのか分かりません。

document.getElementsByTagName('md-select-value')[0].setAttribute('style','z-index:auto; position:inherit') 

https://jsfiddle.net/emamid/n8tr0gfk/6/