webportal
@webportal

Angularjs SVG и аттрибут "d": как заставить работать?

Подскажите пожалуйста как заставить работать это?

<html ng-app="myApp">   
    <head>   
        <title><?=$page_title?></title>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
	<style>
		path:hover{stroke:red;fill:red;}
	</style>
<script>
var app = angular.module('myApp', []);
app.factory('myMap', function($http) {
   return {
        getRegions: function() {
             return $http.get('/map/paths')
                       .then(function(result) {
                            return result.data;
                        });
        }
   }
});

app.controller('Map', function($scope,myMap) {
    $scope.paths = myMap.getRegions();
});
</script>
    </head>   
    <body ng-controller="Map">
	<svg ng-attr-height="1890" ng-attr-width="800">
		<g transform="scale(5),translate(185,100)">
			<path ng-repeat="region in paths" ng-attr-d="{{region.path}}" stroke="#060606" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill="rgb(176,176,176)" original="rgb(185,185,185)"></path>
		</g>
    	</svg>
    </body>   
</html>


На выходе получается такой код:

<path ng-repeat="region in paths" ng-attr-d="M -55.472999999999999 34.622 L -55.374000000000002 34.802999999999997 -55.738 34.781999999999996 -56.039000000000001 34.884999999999998 -56.039000000000001 34.774999999999999 -56.363999999999997 34.734000000000002 -56.472000000000001 34.597000000000001 -56.363999999999997 34.362000000000002 -56.146000000000001 34.368000000000002 -55.999000000000002 34.244 -55.619 34.207999999999998 Z" stroke="#060606" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill="rgb(176,176,176)" original="rgb(185,185,185)"></path>


То есть значение подставляется а ng-attr-d не заменяется на аттрибут d.
  • Вопрос задан
  • 2620 просмотров
Пригласить эксперта
Ответы на вопрос 1
ivankomolin
@ivankomolin
Код рабочий. Если результатом myMap.getRegions() будет например: [{'path':'test1'}, {'path':'test2'}, {'path':'test3'}], то в браузере сформируется следующий код:
<g transform="scale(5),translate(185,100)">
	<!-- ngRepeat: region in paths -->
	<path ng-repeat="region in paths" ng-attr-d="{{region.path}}" ... d="test1">
	</path>
	<!-- end ngRepeat: region in paths -->
	<path ng-repeat="region in paths" ng-attr-d="{{region.path}}" ... d="test2">
	</path>
	<!-- end ngRepeat: region in paths -->
	<path ng-repeat="region in paths" ng-attr-d="{{region.path}}" ... d="test3">
	</path>
	<!-- end ngRepeat: region in paths -->
</g>

Почему у вас на выходе такой результат, совсем не понятно.
Покажите полный результат вывода, название и версию браузера.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы