先看效果图
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Invoice</title>
<style>
.invoice-tip {
text-anchor: middle;
font-size: 20mm;
fill: red;
font-family: KaiTi;
}
</style>
</head>
<body>
<div class="invoice">
<svg viewBox="0,0,900,600">
<!-- 外环 -->
<path d="M15 300 a435 284 0 1 1 0 1 z"
fill="none"
stroke="red"
stroke-width="30">
</path>
<path d="M40 300 a410 260 0 1 1 0 1 z"
fill="none"
stroke="red"
stroke-width="3">
</path>
<!-- 上半文字 -->
<path d="M140 300 A310 160 0 0 1 760 300 "
fill="none"
stroke-width="1"
id="circle-top">
</path>
<text class="invoice-tip">
<textPath xlink:href="#circle-top" startOffset="50%">
全国统一发票监制章
</textPath>
</text>
<!-- 中间文字 -->
<path d="M0 350 L900 350" id="mid-line"></path>
<text class="invoice-tip">
<textPath xlink:href="#mid-line" startOffset="50%">
国家税务总局
</textPath>
</text>
<!-- 下半弧文字 -->
<path d="M80 300 A370 220 1 0 0 820 300 "
fill="none"
stroke-width="1"
id="circle-bottom">
</path>
<text class="invoice-tip">
<textPath xlink:href="#circle-bottom" startOffset="50%">
湖南省税务局
</textPath>
</text>
</svg>
</div>
</body>
</html>