Angular2 - 帶ng樣式的SVG

我正在用ng-repeat繪製SVG行，並且想要更改每行的翻譯。但是，使用ng-attr樣式我無法獲得應用的樣式。Angular2 - 帶ng樣式的SVG

我-component.js：

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'my-component', 
    templateUrl: 'my-component.html' 
}) 

export class MyComponent{ 
    lines: [ 
    { translateX: 0.0, translateY: 0.0, weight: 0.40, x1: 86.69, y1: 1, x2: 98.91, y2: 1 }, 
{ translateX: 0.0, translateY: 0.0, weight: 0.40, x1: 85.31, y1: 9.67, x2: 98.23, y2: 9.67 } 
    ] 
}

我組分-HTML：

<svg id="lines" viewBox="0 0 320.6 542.59"> 
    <line *ngFor="let line of lines" ng-attr-style="{'transform': 'translate('+line.translateX+'px, ' + line.translateY+'px)'}" class="line" [attr.x1]="line.x1" [attr.y1]="line.y1" [attr.x2]="line.x2" [attr.y2]="line.y2"/> 
</svg>

這是我看到的DOM檢查元素時：

<line _ngcontent-ssx-9="" class="line" ng-attr-style="{'transform': 'translate('+line.translateX+'px, ' + line.translateY+'px)'}" x1="189.1" y1="226.41" x2="212.06" y2="226.41"></line>

來源

2017-04-25 IIMaxII

正在使用Angular 1的ng-attr-*，您應該使用[attr.style]（屬性綁定）

[attr.style]="{'transform': 'translate('+line.translateX+'px, ' + line.translateY+'px)'}"

來源

2017-04-25 20:57:19

似乎工作，謝謝。不過，我在控制檯中收到以下消息：警告：清理不安全的樣式值 – IIMaxII

Angular2 - 帶ng樣式的SVG

回答

相關問題