红影 发表于 2022-3-12 19:22
从来不知道还可以这样让文字成圆圈的
神奇的事儿还是挺多的吧
红影 发表于 2022-3-12 19:22
嗯嗯，基本整明白了，只是位置不知道在哪调，我画的轱辘诗咋那么偏右啊。
父窗体的高宽，svg的第一第二个参数以及半径，都是参考因素，它们之间精准设定的话自然居中。以一下代码为例：
<div style="margin: auto; width: 200px; height: 200px; font-family:'微软雅黑'; font-size: 18px; border: 1px solid;">
<svg style="display: block; overflow: visible;">
<path d="M 50 100 a 50 50 0 1 1 0 1 z" id="yuan1" fill="red" />
</svg>
</div>
父窗体 div 是 200*200，那么，圆环的路径应该怎么设定？
圆环半径是50，直径是100，为了让圆环居中，画笔（路径）应先移到{x,y}={50,100}的位置，这是圆的起笔处，位置在圆心向水平方向最左边的位置。你保证好这个，你的环形文本就不会偏移了。
马黑黑 发表于 2022-3-12 20:27
神奇的事儿还是挺多的吧
是啊，在黑黑的帖子里开眼界了{:4_173:}
马黑黑 发表于 2022-3-12 20:43
父窗体的高宽，svg的第一第二个参数以及半径，都是参考因素，它们之间精准设定的话自然居中。以一下代码 ...
嗯嗯，也可以让它靠左的吧，设置css，给个定位应该就可以了。
红影 发表于 2022-3-12 21:45
嗯嗯，也可以让它靠左的吧，设置css，给个定位应该就可以了。
可以通过CSS的margin-left的负值去处理，因为未必做position设置呢
红影 发表于 2022-3-12 21:44
是啊，在黑黑的帖子里开眼界了
我的想象力和实现能力其实很一般
好神奇的园圈。{:4_199:}
加林森 发表于 2022-3-13 12:50
好神奇的园圈。
这个代码不复杂呢
马黑黑 发表于 2022-3-13 12:51
这个代码不复杂呢
是的
马黑黑 发表于 2022-3-12 23:00
可以通过CSS的margin-left的负值去处理，因为未必做position设置呢
还可以这样，这个思路真棒{:4_187:}
马黑黑 发表于 2022-3-12 23:00
我的想象力和实现能力其实很一般
已经很厉害了，经常看得我惊奇无比{:4_199:}
红影 发表于 2022-3-13 14:18
已经很厉害了，经常看得我惊奇无比
那是因为你没有见过高手
红影 发表于 2022-3-13 14:17
还可以这样，这个思路真棒
思路是在实践中得到扩展的
加林森 发表于 2022-3-13 12:54
是的
理解关键部分就可
马黑黑 发表于 2022-3-13 15:39
理解关键部分就可
嗯嗯，谢谢老黑。
加林森 发表于 2022-3-13 15:41
嗯嗯，谢谢老黑。
{:5_108:}
马黑黑 发表于 2022-3-13 15:53
{:5_108:}
<p>svg心形：</p>
<svg width="420" height="420">
<path stroke="#eee" fill="red" style="margin:25px; font-size: 0.65em; display: block; overflow: visible;" id="heart" d="m209.22025,177.86839c62.46273,-161.83824 307.19374,0 0,208.07773c-307.19374,-208.07773 -62.46273,-369.91597 0,-208.07773z"></path>
</svg>
<p>【说明】心形路径的 d 属性由机器生成。<br><br>参考代码：</p>
<p><br></p><p><svg width="420" height="420"></p><p> <path stroke="#eee" fill="red" style="margin:25px; font-size: 0.65em; display: block; overflow: visible;" id="heart" d="m209.22025,177.86839c62.46273,-161.83824 307.19374,0 0,208.07773c-307.19374,-208.07773 -62.46273,-369.91597 0,-208.07773z"/></p><p></svg></p>
加林森 发表于 2022-3-13 15:55
看看 38# 的svg心形。svg很强大
马黑黑 发表于 2022-3-13 16:01
看看 38# 的svg心形。svg很强大
好的，我会仔细去研究的。