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 Example

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

1 个答案: