CSS+SVGで円上に文字を配置する
https://gyazo.com/0a030b4ff9a8b76b9716ca63b99a7b1a
使う機会はあまり無いかもしれませんが、こういった円周上に文字を配置する方法の記事です。
流れとしては以下のような感じです。
svgで円を作成。
textPathでその円に配置。
width,heightで大きさの変更。
overflow: visible; で文字が消えない様に。
fill: none; で円の色をなくす。
fill: #0089A7; で文字色を変更する。
code:html
<div>
<svg viewBox="0 0 100 100">
<path d="M 0,50 a 50,50 0 1,1 0,1 z" id="circle" />
<text>
<textPath xlink:href="#circle">
文字を円周上に配置する文字を円周上に配置する文字を円周
</textPath>
</text>
</svg>
</div>
code:css
div {
width: 300px;
height: 300px;
margin: 100px auto;
font-size: 12px;
}
div svg {
overflow: visible;
}
div path {
fill: none;
}
div text {
}
codepen
参考