使用 svg 和 ng-repeat 在大矩形内制作多个小矩形

Question

我有这段代码，我需要在一个大矩形内显示多个小矩形，我需要多次执行整个过程。

这是我的数据：

"data": {
  "rect1": { 
     "a":[10,20],
     "b":[35,10] 
   },
   "rect2": {
     "y":[25,10],
     "z":[55,20] 
   }
}

此数据应分别生成两个矩形 rect1 和 rect2 以及每个矩形内的两个矩形 a、b 和 y、z。每个小矩形都有起始位置 x 和该小矩形的宽度，例如 a 从 x 10 开始，宽度 = 20。

<ul>
    <li ng-repeat="(rect,coords) in data">
    <svg>
    <rect x=1 y=1 width=1000 height=50 style="fill:grey;" />
    <span ng-repeat="coord in coords">
    <rect x={{coord[0]}} y=1 width={{coord[1]}} height=50 style="fill:blue;" />

enter code here

但是这段代码不起作用，因为我在两个标签之间添加了 ng-repeat 行。

image of what the final result should look like

我在 powerpoint 中制作了这张图片，所以请忽略背景。

Answer 1

你们非常接近。您不能在 SVG 中使用 <span>。但其余大部分都是正确的。

此外，最好使用 ng-attr-x="{{value}} 而不是 x="{{value}}。否则 SVG 解析器将抛出错误，因为它不理解字符串 "{{value}}".

这是一个工作示例。

var app = angular.module('myApp', [])

app.controller("AppCtrl", ["$scope", function($scope) {
  
  $scope.data = {
    "rect1": { 
       "a":[10,20],
       "b":[35,10] 
     },
     "rect2": {
       "y":[25,10],
       "z":[55,20] 
     }
  };

}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">

  <ul ng-controller="AppCtrl">
    <li ng-repeat="(rectName, coords) in data">
      <svg id="{{rectName}}" width="100%" height="50">
        <rect x="1" y="1" width="1000" height="50"
              style="fill: lightgrey;" />
        <rect ng-repeat="(label, coord) in coords"
              ng-attr-x="{{coord[0]}}" y="1"
              ng-attr-width="{{coord[1]}}" height="50"
              style="fill: blue;" />
        <text ng-repeat="(label, coord) in coords"
              ng-attr-x="{{coord[0]}}" y="25"
              style="fill: white;">{{label}}</text>
      </svg>
    </li>
  </ul>

</div>

使用 svg 和 ng-repeat 在大矩形内制作多个小矩形

Make multiple small rectangles inside big rectangle using svg and ng-repeat

svg

rectangles

angularjs

angularjs-ng-repeat