2

私は AngularJS と SVG の両方に慣れていないので、何かひどく間違ったことをしている場合は申し訳ありません。

AngularJS で SVG パターンを作成しようとしています:

コード フィドル: http://jsfiddle.net/WFxF3/

テンプレート：

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <pattern id="grid" width="{{cubeWidth}}" height="{{cubeHeight}}" patternUnits="userSpaceOnUse">
            <path d="M 0 0 L 0 {{cubeHeight}}" fill="none" stroke="gray" stroke-width="1" stroke-opacity="0.5"/>
            <path d="M 0 0 L {{cubeWidth}} 0" fill="none" stroke="gray" stroke-width="1" stroke-opacity="0.5"/>
            <!--<rect width="80" height="80" stroke="red" stroke-width="20" stroke-opacity="0.5" fill="white"/>-->
        </pattern>

    </defs>

    <rect width="100%" height="100%" fill="url(#grid)"/>
</svg>

コントローラ：

'use strict';

angular.module('gridifyApp')
  .controller('MainCtrl', function ($scope) {

        var docWidth = document.width;
        var columns = 12;
        var cubeWidth = docWidth / columns;
        var cubeHeight = 44;

        $scope.cubeWidth = cubeWidth;
        $scope.cubeHeight = cubeHeight;
  });

動作しているように見えますが、コンソール エラーが発生します。 angularJS ビューのコンソール エラー

理由はありますか？

4

2 に答える 2

18

問題は、角度が何かを行う前にsvgが解析されているため、角度がそれに到達する前に二重中括弧を含む値が無効になることです。Angular のチームは、ある種の「遅延バインディング」を定義する方法を追加しました。目的の属性の前に を付けて使用できますng-attr-。バインディング評価が有効になるまで待機し、適切な値を持つ実際の属性を追加します。あなたの場合は次のようになります。

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <pattern id="grid" ng-attr-width="{{cubeWidth}}" ng-attr-height="{{cubeHeight}}" patternUnits="userSpaceOnUse">
            <path ng-attr-d="M 0 0 L 0 {{cubeHeight}}" fill="none" stroke="gray" stroke-width="1" stroke-opacity="0.5"/>
            <path ng-attr-d="M 0 0 L {{cubeWidth}} 0" fill="none" stroke="gray" stroke-width="1" stroke-opacity="0.5"/>
            <!--<rect width="80" height="80" stroke="red" stroke-width="20" stroke-opacity="0.5" fill="white"/>-->
        </pattern>

    </defs>

    <rect width="100%" height="100%" fill="url(#grid)"/>
</svg>

もうエラーはないはずです。角度バージョンを更新することを忘れないでください。

于 2013-07-28T11:20:12.377 に答える
2

SVG の解析は、AngularJS が変数を設定する前に行われます。プログラムで SVG を作成しようとするかもしれません。

于 2013-07-26T21:01:40.293 に答える