# SVG绘制弧形文字

SVG绘制弧形文字。

HTML:

<div class="circle-word">
    <svg width="400px" height="300px" viewBox="0 0 400 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
		<defs>
            <path id="textCircle" d="M 20 100 A 80 80 0 0 0 180 100 A 80 80 0 0 0 20 100" fill="none" stroke="#333"></path>
        </defs>
        <text class="textCircle" fill="yellowgreen">
            <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#textCircle">这是一段随着path路径绘制的文字</textPath>
        </text>
    </svg>
</div>

SCSS:

.circle-word {
    position: absolute;
    width: 400px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.textCircle {
    font-size: 20px;
    letter-spacing: 4px;
}
.textCircle2 {
    font-size: 12px;
    letter-spacing: 1px;
}

效果如下(点击 HTML/SCSS 可以对代码进行编辑):

阅读全文