时间戳

首页 > 解决方案 > 如何将 svg 文本粘贴到 svg 圆圈？

html - 如何将 svg 文本粘贴到 svg 圆圈？

问题描述

简而言之，我希望无论圆圈移动到哪里，都会有一条文字与他同在。

我有一个与此类似的代码：

<svg width="100%" height="100%">
<g>
<circle cx="50%" cy="6%" r="7%" [ngStyle]="{'fill': circlerColor, 'transform': 'rotate(' + circleDegrees + 'deg)', 'transform-origin': 'center center', 'transition': 'transform 0.5s'}"></circle>

<text cx="50%" cy="6%" r="7%" style="z-index: 100; font-size: 10px; font-weight: bold;" [ngStyle]="{'fill': circlerColor, 'transform': 'rotate(' + circleDegrees + 'deg)', 'transform-origin': 'center center', 'transition': 'transform 0.5s'}"></text>
</g>
</svg>

从代码中，您可以看到圆圈像时钟一样 360 度移动。现在，这段代码真的把文字“粘”在了圆圈上，但是旋转了！例如，当它在 180 度时，文本是“倒置”。我想要一些方法，从文本中保持水平，“紧贴”但水平。

提前谢谢！

标签： htmlcssangularsvgcss-animations

解决方案

好的，我结束的解决方案就像我的问题中的代码。

必须是一个 'g' 标签，它包含文本和圆圈。现在，您不能单独使用变换来移动圆：旋转、平移等，所有这些操作都必须在整个组上，我的意思是在“g”标签上。

我有一个特定的问题，即使旋转将在“g”标签内，文本也不会是水平的。解决方法很简单，“g”是“父”，里面的文字是“子”。所以将父级旋转 180 度，将子级旋转 180 度。

阅读有关“在圆形路径中移动元素”的更多信息：

https://usefulangle.com/post/32/moving-an-element-in-circular-path-with-css

推荐阅读