SVG：旋转整个文本

Posted 2023-03-06

【中文标题】SVG：旋转整个文本

【英文标题】：SVG : rotate whole texte

【发布时间】：2020-08-19 05:25:33

【问题描述】：

我想旋转一个角度的单词列表。 但只有字符倾斜：

我的代码在这里：

<svg  >
      <g *ngFor="let fruit of fruits">
        <g>
          <text [attr.x]="fruit.x" [attr.y]=50 dx=-10 dy=-7 rotate="-30 fruit.x 50">
            fruit.name
          </text>
        </g>
      </g>
</svg>

提前感谢您帮助旋转所有单词

【问题讨论】：

请尝试使用transform="rotate(-30,100,50)"之类的东西，而不是rotate

我试试这个，但不幸的是它对我不起作用，谢谢你虽然 enxaneta

【参考方案1】：

正如我所说，您需要使用 transform="rotate(... 而不是 rotate

<svg  >
      <g>
        <g>
          <text x="100" y=50 dx=-10 dy=-7 transform="rotate(-30 100 50)">
            fruit name 1
          </text>
        </g>
      </g>
      <g>
        <g>
          <text x="200" y=50 dx=-10 dy=-7 transform="rotate(-30 200 50)">
            fruit name 2
          </text>
        </g>
      </g>
</svg>

如果这不适合您，请使用有效示例更新您的代码。

【讨论】：

我认为我的问题来自转换属性中的变量：transform="rotate(-30 fruit.x 50)"。我遍历一个列表以生成文本元素