Question

在我的项目中，我有一组svg元素 - 圆圈 - 放在<svg>元素中（一个用于所有）。这个<svg>元素放在angular指令中。

我希望这个svg区域可以调整大小 - 当用户更改窗口大小时，svg区域适合新的大小，并且其中的所有元素都会缩放。我找到了<svg>元素属性的非常好的解决方案，例如preserveAspectRatio http://ng-table.com/#/sorting/demo-sorting-basic和{{3}}。但这部分对我有用 - 我将我的一个圆圈（蓝色圆圈）放在svg区域的中心。当我使用上面提到的方法调整svg的大小时，center circle在中心不再可见。有人知道如何解决它吗？

这是我的index.html：

<div my-content></div>

这是我的角度指令：

angular
    .module('myApp', [])
    .directive('myContent', function() {
       return {
           restrict: 'EA',
           templateUrl:  'circles.html',
           templateNamespace: 'svg',
           controller: function($scope) {
               $scope.circles = [
                  {"rad": '15', "color": "blue"},
                  {"rad": '25', "color": "green"},
                  {"rad": '30', "color": "red"},
                  {"rad": '35', "color": "brown"}
               ];
               $scope.dimensions = {
                   clientWidth: document.documentElement.clientWidth,
                   clientHeight: document.documentElement.clientHeight
               };
               $scope.renderCircles = function($scope) {
                   $scope.arr = [];
                   $scope.arr.push({
                       cx: $scope.dimensions.clientWidth / 2,
                       cy: $scope.dimensions.clientHeight / 2,
                       r: $scope.circles[0].rad * 2,
                       fill: $scope.circles[0].color
                   });
                   for (var i = 1; i < $scope.circles.length; i++) {
                       $scope.arr.push({
                           cx: $scope.circles[i].rad + i * 3,
                           cy: $scope.circles[i].rad + i * 2,
                           r: $scope.circles[i].rad * 2,
                           fill: $scope.circles[i].color
                       });
                   }
               };
               $scope.renderCircles($scope);
           }
       }
    });

以下是circles.html：

    <svg xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
         viewbox="0 0 500 500" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"
         xml:space="preserve">

        <g ng-repeat="circle in arr">
            <circle
                ng-attr-cx="{{ circle.cx }}"
                ng-attr-cy="{{ circle.cy }}"
                ng-attr-r="{{ circle.r }}"
                ng-attr-fill="{{ circle.fill }}">
            </circle>
        </g>
    </svg>

我为preserveAspectRatio尝试了不同的值但没有要求的结果。也许有人知道解决方案？

非常感谢提前！

如何使AngularJS指令中的SVG元素可调整大小？

0 个答案: