SVG以组件属性作为旋转属性旋转

Question

我是 Angular2 的新手，目前遇到了一个基本问题。我的目标是显示具有动态 x 位置的旋转文本（目前这些位置来自静态选项卡）。这是我的代码。

myComponent.ts ：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-line-plan',
  templateUrl: './line-plan.component.html',
  styleUrls: ['./line-plan.component.css']
})
export class MyComponent implements OnInit {

stations = [
  {x: 20, y: 150},
  {x: 50, y: 150},
  {x: 80, y: 150},
];

constructor() { }

ngOnInit() {
  }
}

myComponent.html：

<div class="transportLine">
  <div class="svgLine">
    <svg width="1140" height="300">
      <line [attr.y1]="150" [attr.x1]="0" [attr.y2]="150" [attr.x2]="1140" style="stroke:#F69EB4;stroke-width:6"/>

      <text *ngFor="let station of stations" [attr.x]="station.x"  y="130"
        [attr.style]="{'transform': 'rotate(-50, '+station.x+',130)'} | safeStyle">Rotated text</text>

      <circle *ngFor="let station of stations"
              [attr.cx]="station.x"
              [attr.cy]="station.y"
              [attr.r]="8"
          style="fill:white;stroke:#3f3f3f;stroke-width: 1"></circle>

    </svg>
  </div>
</div>

旋转不起作用，尽管我花了很长时间寻找原因，但我找不到解决方案（我尝试了其他几种语法/方法来进行旋转）。我哪里做错了 ？有人愿意帮助我吗？

提前致谢

Answer 1

你可以试试这个选项

[attr.transform]="'rotate(-50, '+station.x+',130)'"

Plunker 示例