角材料作为SVG内的foreignObject答案

【问题标题】：Angular material as foreignObject inside SVG角材料作为SVG内的foreignObject
【发布时间】：2017-11-16 08:28:22
【问题描述】：

我的一般目的是制作一个动态且非常简单的流程图视图。我使用 svg 和角度材料。我正在尝试在 SVG 中显示有角度的材质对象，例如（md-select、md-menu、md-button）。经过快速研究，我发现可以使用“foreignObject”标签。

其次；关于鼠标平移，我想在 SVG 中一次移动所有这些元素。所以我使用“viewBox”属性。

在我的示例中；
我使用“foreignObject”标签在 svg 元素内显示角度材料“md-select”。

我希望“md-select”在我更改 svg 元素的 viewBox 属性的 x 和 y 值时移动，但在可点击区域更改时它会保持其位置。

当我尝试使用 html“选择”相同的场景时，它会按我的预期移动。但我不能对有角度的物质对象做同样的事情。（他们在视觉上保持在原来的位置，但他们的点击区域在 viexBox x-y 值的另一个地方。）

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

【问题讨论】：

标签： angularjs svg angular-material

【解决方案1】：

这不是一个完整的解决方案，但我认为这是朝着这个方向迈出的几步。我削减了您的小提琴以显示错误放置的 MD 选择以及正确放置的常规选择，并带有一个按钮，该按钮将 md-select-value 标记的样式修改为具有位置：继承和 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/

【讨论】：