Question

我正在尝试在使用Snap svg zpd启用的SVG容器中使用ng-repeat加载多个矩形。矩形不会在UI中呈现。 Plunker链接已附加Snapsvgzpd+angular js

<!DOCTYPE html>
<html ng-app="plunker">

<head>
<meta charset="utf-8" />
<title>AngularJS svg with zoom and pan Plunker</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg.zpd/0.0.11/snap.svg.zpd.js"></script>
<script src="app.js"></script>
 </head>
<body ng-controller="MainCtrl">
<div>
  <svg id="diagram" style="border: solid 1px #ccc; width: 400px; height:400px;" class="svg-drop" height="500px" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g id="group" >
    <image x="0" y="0" width="784" height="391" xlink:href="http://www.slashroot.in/sites/default/files/advanced%20static%20routing%20config.png"></image>
    <rect ng-repeat="ar in arr" ng-attr-x="{{ar.x + 30}}" ng-attr-y="{{ar.x + 150}}" width="25" height="25" fill="red"></rect>
    <rect x="0" y="0" width="25" height="25" fill="red"></rect>
  </g>
</svg>
</div>

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

app.controller('MainCtrl', function($scope) {
$scope.arr = [{x:10},{x:20},{x:30}];
var paper = Snap("#diagram");
paper.zpd();

});

控制台错误：

如果我删除snap svg和snap svg zpd，则会渲染矩形。

Answer 1

你需要从ng-attr-x =“{{ar.x + 30}}”ng-attr-y =“{{ar.x + 150}}”

中删除大括号

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.arr = [{x:10},{x:20},{x:30}];
  var paper = Snap("#diagram");
  paper.zpd();

});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS svg with zoom and pan Plunker</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg.zpd/0.0.11/snap.svg.zpd.js"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl">
    <div>
      <svg id="diagram" style="border: solid 1px #ccc; width: 400px; height:400px;" class="svg-drop" height="500px" xmlns="http://www.w3.org/2000/svg" version="1.1">
      <g id="group" >
        <image x="0" y="0" width="784" height="391" xlink:href="http://www.slashroot.in/sites/default/files/advanced%20static%20routing%20config.png"></image>
        <rect ng-repeat="ar in arr" ng-attr-x="ar.x + 30" ng-attr-y="ar.x + 150" width="25" height="25" fill="red"></rect>
        <rect x="0" y="0" width="25" height="25" fill="red"></rect>
      </g>
    </svg>
    </div>
    
  </body>

</html>

ng-repeat不适用于Snap svg zpd

1 个答案: