如何翻转数字，在我的案例中为svg中的圆圈添加边框？

Question

我像这样做了一个圆圈，就像一个时钟。这是link。 来自plnkr的一些代码：

getTransformMatrix() {
  let t;
  const res = [];
  const x = this.items.length - 2;
  for (let i = 0; i < this.items.length; i++) {
    t = -360 / this.items.length * i + (-360 / this.items.length * x);
    res.push('translate(' + 55 + ' ' + 55 + ')' + 'rotate(' + t + ')' + 'translate(' + (-55) + ' ' + (-55) + ')');
   }
 return res;}

现在有一些我无法解决的问题：

• 1。如何使数字平滑而不倒置？
• 2。如何添加边框，即如下图所示拆分它们。
• 3。为什么内圈不正确？我可以为每个圆圈编写一个单独的函数吗？

这是我想要看到的图片。

Answer 1

与围绕圆心旋转文本位置的方式相同，您需要围绕自己的中心旋转文本，但方向相反。

我已经在这个插件中攻击了一个解决方案：

https://plnkr.co/edit/cpkaJwdiVqj6vT2rdteO?p=preview

我所做的更改如下：

1. 文本的转换需要与标记行不同，因此我创建了一个新数组textTransform。

   <text *ngFor="let l of items; let i = index" x="53.7" y="105" fill="#F8B133"
         font-size="3" [attr.transform]="textTransform[i]">{{i+1}}</text>
   
   textTransform = [];
   
   ngOnInit() {
       this.transform = this.getTransformMatrix();
       this.textTransform = this.getTextTransformMatrix();
   }
   

2. 用于计算文本元素的转换属性的新函数：

   getTextTransformMatrix() {
       let t;
       const res = [];
       const x = this.items.length - 2;
       for (let i = 0; i < this.items.length; i++) {
         t = -360 / this.items.length * i + (-360 / this.items.length * x);
         res.push('rotate(' + t + ', 55,55) rotate(' + (-t) + ', 54,104)');
       }
       return res;
   }
   

   请注意，我使用了rotate()的版本来获取旋转中心的坐标。它等同于您正在进行的转换，但更简洁。