Question

我的一般目的是制作一个动态且非常简单的流程图视图。我使用svg和棱角分明的材料。我试图在SVG中显示角度材料对象，如（md-select，md-menu，md-button）。经过快速研究后，我发现有可能使用＆＃34; foreignObject＆＃34;标签

其次;我想在SVG中一次性移动所有这些元素，关于鼠标平移。所以我用＆＃34; viewBox＆＃34;属性。

在我的样本中;
我用＆＃34; foreignObject＆＃34;标签显示角度材料＆＃34; md-select＆＃34;在svg元素中。

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

当我使用html＆＃34尝试相同的场景时，选择＆＃34;它像我期望的那样移动。但我不能对角度物质对象做同样的事情。（它们在视觉上保持原始位置，但是它们的点击区域与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.

Answer 1

这不是一个完整的解决方案，但我认为这是朝这个方向迈出的一步。我缩小你的小提琴以显示错误放置的MD选择以及正确放置的常规选择，使用一个按钮修改md-select-value标签的样式以具有位置：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/

Angular材质为SVG中的foreignObject

1 个答案: