Angularjs 使用svg和ng repeat在大矩形内创建多个小矩形

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

以下是我的数据：

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

该数据应形成两个矩形，即矩形1和矩形2，以及分别位于其中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;" />             

在这里输入代码

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

---

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

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

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

下面是一个工作示例

var app=angular.module'myApp'，[] app.controllerAppCtrl，[$scope，函数$scope{ $scope.data={ rect1:{ 答：[10,20]， b:[35,10] }, 第2条：{ y:[25,10]， z:[55,20] } }; }]; {{label}}

---

我不明白你想怎么画矩形。你能提供一个例子吗？更新了问题，使其具有最终结果的图像。因此，如果较小的矩形也可以打印它们的名称，那将是非常棒的。但是我也可以不用它。我仍然看不到坐标之间的映射，坐标的格式很奇怪，它和绘制的矩形之间的映射。坐标是位置x和宽度WOW。非常感谢你。这正是我想要的。啊，你刚才所做的很有道理。