SVG使用--旋转后无法重新放置多边形

我正在尝试使用SVG和纯CSS在一个圆内创建一个16点星——没有JS！ 我的策略是创建16个等边三角形（通过def和Use保持干燥），将每个Use迭代旋转22.5度。 我的问题是，当我将rotate（）转换应用于第二个三角形时，SVG会更改三角形的中心点——CSS3不会更改（它绕固定轴旋转）。 我尝试过添加x和y参数，添加一个类，进行translate（）转换，进行内联转换。。。什么都不管用——我只是想不出如何将三角形移回圆圈内的位置（旋转）（我估计以150150为中心）。
任何帮助都将不胜感激。下面是我遇到问题的SVG代码行

<use xlink:href="#triangle" style="transform: rotate(22.5deg);"  />

你可以在行动中看到它

.toile{
显示器：flex；
弯曲方向：立柱；
最大宽度：400px；
最大高度：800px；
证明内容：中心；
对齐项目：居中；
/*将外部包含元素（圆）水平和垂直居中*/
边界：5px#009000；
/*绿色的*/
边框样式：凹槽；
背景色：#f9e4b7；
保证金：0自动；
/*在页面上居中放置曲面*/
}

---

这是一种方法： 首先我简化了你的代码。除非你有充分的理由这样做，否则事情总是简单一些

---

我计算了svg画布中心周围三角形的点：

---

请记住使用snippet功能将代码移动到问题中，以避免链接损坏（我为您做了这件事）您意识到与只编写所需形状相比，元素有巨大的性能开销吗？不要仅仅因为SVG看起来更漂亮就使用错误的工具。我将尝试找到一种方法来计算SVG的准确性能影响，以评估您的评论。一般来说，我非常喜欢干编码，一个接一个地重复多边形有点奇怪。关于代码片段功能，我将尝试找出如何将代码片段添加到我的答案中。这不是很明显，但我正在学习！同时，我不打算删除我在这里发布的CodePen中的示例问题代码。“我计算了svg画布中心周围三角形的点：”我可以确切地问一下您是如何做到这一点的吗？我已经更新了我的答案，说明了如何计算三角形的顶点。如果不想使用JS，可以从inspector复制值。