svg：设置path路径画圆形

马黑黑

红影 发表于 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
神奇的事儿还是挺多的吧

是啊，在黑黑的帖子里开眼界了

红影

马黑黑 发表于 2022-3-12 20:43
父窗体的高宽，svg的第一第二个参数以及半径，都是参考因素，它们之间精准设定的话自然居中。以一下代码 ...

嗯嗯，也可以让它靠左的吧，设置css，给个定位应该就可以了。

马黑黑

红影 发表于 2022-3-12 21:45
嗯嗯，也可以让它靠左的吧，设置css，给个定位应该就可以了。

可以通过CSS的margin-left的负值去处理，因为未必做position设置呢

马黑黑

红影 发表于 2022-3-12 21:44
是啊，在黑黑的帖子里开眼界了

我的想象力和实现能力其实很一般

加林森

好神奇的园圈。

马黑黑

加林森 发表于 2022-3-13 12:50
好神奇的园圈。

这个代码不复杂呢

加林森

马黑黑 发表于 2022-3-13 12:51
这个代码不复杂呢

是的

红影

马黑黑 发表于 2022-3-12 23:00
可以通过CSS的margin-left的负值去处理，因为未必做position设置呢

还可以这样，这个思路真棒

红影

马黑黑 发表于 2022-3-12 23:00
我的想象力和实现能力其实很一般

已经很厉害了，经常看得我惊奇无比

马黑黑

红影 发表于 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
嗯嗯，谢谢老黑。

加林森

马黑黑 发表于 2022-3-13 15:53

马黑黑

svg心形：

【说明】心形路径的 d 属性由机器生成。

参考代码：

<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"/>

</svg>

马黑黑

加林森 发表于 2022-3-13 15:55

看看 38# 的svg心形。svg很强大

加林森

马黑黑 发表于 2022-3-13 16:01
看看 38# 的svg心形。svg很强大

好的，我会仔细去研究的。