-1

AngularJS を使用して SVG を設定しようとしています。Firefox と Chrome ではこれは完全に機能しますが、IE では (形状に関係なく) 最後の形状しか表示されません。

HTML:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="300"
    overflow="hidden" ng-controller="MyCtrl" ng-cloak>

    <rect fill="white" x="0" y="0" width="400" height="300" />

    <rect ng-repeat="item in items"
        width="{{item.width}}"
        height="{{item.height}}"
        z="{{item.z}}"
        fill="{{item.fill}}"
        transform="translate({{item.tx2}} {{item.ty2}})
            rotate({{item.angle}})
            scale({{item.scaleX}} {{item.scaleY}})
            translate({{item.tx1}} {{item.ty1}})" />

</svg>

JavaScript:

var app = angular.module('MyModule', [])
    .controller('MyCtrl', function ($scope, $http, AudioSrv) {

    var demoItem = function (cnt, color) {
        item = {};
        item.x = 0;
        item.y = 0;
        item.width = 100;
        item.height = 100;
        item.fill = color;
        item.z = cnt + 1;
        return item;
    };

    var setItem = function (item, angle, scaleX, scaleY, x, y) {
        item.tx1 = -item.width * 0.5;
        item.ty1 = -item.height * 0.5;
        item.angle = angle;
        item.scaleX = scaleX;
        item.scaleY = scaleY;
        item.tx2 = x;
        item.ty2 = y;
        return item;
    };

    $scope.items = [
        setItem(demoItem(0, 'black'), 0, 2, 2, 0, 0),
        setItem(demoItem(1, 'blue'), 0, 1, 1, 0, 0),
        setItem(demoItem(2, 'orange'), 0, 0.5, 0.5, 0, 0),
        setItem(demoItem(3, 'green'), -90, 2, 2, 200, 150),
        setItem(demoItem(4, 'purple'), 45, 0.5, 0.5, 200, 150)
    ];
});

これは IE の既知のバグですか? 回避策はありますか?

編集：

さらに調査した結果、ng-repeat 内のすべてのアイテムが最後のアイテムに置き換えられているように見えます。これは、同じコレクションにバインドされた入力で、SVG の外部でも発生します。

4

1 に答える 1

1

item変数の新しくスコープされたバージョンを作成しないため、変数を再利用しています (したがって、毎回以前のバージョンを上書きします) 。

var demoItem = function (cnt, color) {
  item = {}; <-- here
  ...

代わりにこれを使用してください：

var demoItem = function (cnt, color) {
  var item = {};
  ...
于 2013-06-07T20:36:47.040 に答える