如何在 svg 圆圈中居中 svg 路径? [英] How do I centre an svg path in an svg circle?
问题描述
我有一个 GitHub 徽标的 svg(取自
我尝试从 svg 中获取 path
并使用该 path
和一个 circle
创建另一个 svg,例如:
svg {填充:5px;填充:无;笔画:黑色;笔画宽度:1px;笔画线连接:圆形;}SVG:悬停{笔画:红色;}
但我不知道如何将 path
置于 circle
的中心,我该怎么做?
从translate
开始的那一刻
您将继续堆叠 <g>
组和 translates
就像在 10 人聚会上的空寿司盘
相反,学习编辑
I have an svg of the GitHub logo (taken from Simple Icons).
I would like to centre this svg in a circle so it looks something like this:
I've tried taking the path
from the svg and creating another svg with that path
and a circle
, like:
svg {
padding: 5px;
fill: none;
stroke: black;
stroke-width: 1px;
stroke-linejoin: round;
}
svg:hover {
stroke: red;
}
<svg height="90" width="90">
<circle cx="48%" cy="48%" r="48%" />
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>
But I don't know how to centre the path
in the circle
, how would I do that?
The moment you start with translate
you will continue to stack <g>
groups and translates
like empty sushi plates at a party of 10
Instead, learn to edit MDN: SVG paths
Tool of choice: SVG Path Editor https://yqnn.github.io/svg-path-editor/
- Copy/paste d-path
- reduced presicion to 0 (for explanation purposes, but its always good to lower precision)
The path is:
M12 0c-7 0-12 5-12 12c0 5 3 10 8 11c1 0 1 0 1-1c0 0 0-1 0-2c-3 1-4-2-4-2C4 18 4 18 4 18
c-1-1 0-1 0-1c1 0 2 1 2 1c1 2 3 1 4 1c0-1 0-1 1-2c-3 0-6-1-6-6c0-1 1-2 1-3c0 0-1-2 0-3
c0 0 1 0 3 1c1 0 2 0 3 0c1 0 2 0 3 0c2-2 3-1 3-1c1 2 0 3 0 3c1 1 1 2 1 3c0 5-3 6-6 6
c0 0 1 1 1 2c0 2 0 3 0 3c0 0 0 1 1 1C21 22 24 18 24 12c0-7-5-12-12-12
Learn SVG: M and m are moves C and c are curves
capital M and C are absolute positioned points, we don't want those when we alter the path, because they would always stay at the absolute position
Convert to relative in the path editor
The path is:
m12 0c-7 0-12 5-12 12c0 5 3 10 8 11c1 0 1 0 1-1c0 0 0-1 0-2c-3 1-4-2-4-2c-1 0-1 0-1 0
c-1-1 0-1 0-1c1 0 2 1 2 1c1 2 3 1 4 1c0-1 0-1 1-2c-3 0-6-1-6-6c0-1 1-2 1-3c0 0-1-2 0-3
c0 0 1 0 3 1c1 0 2 0 3 0c1 0 2 0 3 0c2-2 3-1 3-1c1 2 0 3 0 3c1 1 1 2 1 3c0 5-3 6-6 6
c0 0 1 1 1 2c0 2 0 3 0 3c0 0 0 1 1 1c6-1 9-5 9-11c0-7-5-12-12-12
That first
m12 0
is the start DRAWING positionIn the editor we see:
- the top-left is 0,0
- the (square) image is 24 units wide
(SVG is a vector format, they are not pixels)
to add space for a circle the image needs to be moved 6 units right and 6 units down
That changes the
viewBox="0 0 24 24"
to:viewBox="0 0 30 30"
- A
viewBox="0 0 W H"
is the most comfortable for your future SVG adventures. - A
viewBox="-15 -15 15 15"
is great when you do a lot of drawing around a (0,0) center point.
- A
Now instead of using
transform="translate(x y)"
,
you change the d-path start position fromM12 0
to:M15 3
new x = x + 6/2 = 12 + 3 = 15
new y = y + 6/2 = 0 + 3 = 3
since it is the first path move, it doesn't matter if its
m15 3
orM15 3
use an extra
<rect>
to always see the viewBox size
<svg height="90" width="90" viewBox="0 0 30 30">
<rect width="100%" height="100%" fill="pink"/>
<circle r="48%" cx="50%" cy="50%" fill="none" stroke-width="1" stroke="red" />
<path d="M15 3c-7 0-12 5-12 12c0 5 3 10 8 11c1 0 1 0 1-1c0 0 0-1 0-2c-3 1-4-2-4-2c-1 0-1 0-1 0
c-1-1 0-1 0-1c1 0 2 1 2 1c1 2 3 1 4 1c0-1 0-1 1-2c-3 0-6-1-6-6c0-1 1-2 1-3c0 0-1-2 0-3
c0 0 1 0 3 1c1 0 2 0 3 0c1 0 2 0 3 0c2-2 3-1 3-1c1 2 0 3 0 3c1 1 1 2 1 3c0 5-3 6-6 6
c0 0 1 1 1 2c0 2 0 3 0 3c0 0 0 1 1 1c6-1 9-5 9-11c0-7-5-12-12-12"/>
</svg>
End result:
- One step (or giant leap) further is to write the
<circle>
as (part of) the d-path
using: http://complexdan.com/svg-circleellipse-to-path-converter/
这篇关于如何在 svg 圆圈中居中 svg 路径?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!