css 印章效果(环形文字) 上半圆和下半圆

<div class="printPage" :class="[ printData.hideTemplate ? 'hideTemplate' : '']" v-for="(item, index) in printData.list">
            <div class="outer">
                <div class="innerLayer">
                    <span class="span1">维修合格证</span><br>
                    <span class="span2">有效时间截止:{{(item.maintenanceDate || '').split(" 至 ")[1]}}</span><br>
                    <span class="span3">维修企业:{{item.maintenanceCompany}}</span><br>
                    <!--<span class="span4"></span>
                    <span class="span5"></span>-->
                </div>
            </div>
            <div class="circular">
              <svg viewBox="0 0 100 100">
                  <path d='M 0,50 a 50,50 0 1,1 0,1 z' id="circle-seal" />
                  <!--如果环形文字小于半圆 d参数可用 'M 0,50 a 50,50 0 1,1 100,0'-->
                  <!--如果环形文字大于半圆 d参数可用 'M 0,50 a 50,50 0 1,1 0,1'-->
                  <text>
                      <textPath xlink:href="#circle-seal">
                          南阳市建筑消防协会消防产品工作委员会
                      </textPath>
                  </text>
              </svg>
            </div>
            <div class="circularAnticlockwise">
              <svg viewBox="0 0 100 100">
                  <path d='M 0,50 a 50,50 0 1,0 100,0' id="circle-seal1" />
                  <!--如果环形文字小于半圆 d参数可用 'M 0,50 a 50,50 0 1,1 100,0'-->
                  <!--如果环形文字大于半圆 d参数可用 'M 0,50 a 50,50 0 1,1 0,-1'-->
                  <text>
                      <textPath xlink:href="#circle-seal1">
                          NanYang Building Fire Protection Association
                      </textPath>
                  </text>
              </svg>
            </div>
        </div>

<style scoped lang="scss">
.printPage {
  border-width: 3px;
  border-color: rgb(0, 0, 0);
  border-style: solid;

  position: relative;

  //在这里设置宽高
  width: 14.5cm;
  height: 10cm;
  margin: 10px 0 20px 0;
  padding: 0;
  page-break-after: always;


  display: flex;
  justify-content: center;
  align-items: center;
  .outer{
    width: 365px;
    height: 365px;
    border-radius: 50%;
    border:1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;

    .innerLayer{

      width: 285px;
      height: 285px;
      border-radius: 50%;
      border:1px solid red;

      .span1{
        font-size: 21px;
        top:32px;
        position:relative;
        display: flex;
        justify-content: center;
        align-items: center;
        color:black;
      }

      .span2{
        font-size: 21px;
        top:63px;
        position:relative;
        display: flex;
        justify-content: center;
        align-items: center;
        color:black;
      }

      .span3{
        font-size: 21px;
        top:88px;
        position:relative;
        display: flex;
        justify-content: center;
        align-items: center;
        color:black;
      }

      .span4{
        font-size: 21px;
        top:51px;
        position:relative;
        display: flex;
        justify-content: center;
        align-items: center;
        color:black;
      }
      .span5{
        font-size: 21px;
        top:54px;
        position:relative;
        display: flex;
        justify-content: center;
        align-items: center;
        color:black;
      }
    }
  }

  .circular{
	width: 309px;
	height: 309px;
  position:absolute;
}
.circular path { fill: none; }
.circular svg { display: block; overflow: visible; transform: rotate(8deg);}
.circular svg text{
            letter-spacing: 0px;
            fill:black;
            font-size: 8px;
        }

.circularAnticlockwise{
	width: 335px;
	height: 335px;
  position:absolute;
}
.circularAnticlockwise path { fill: none; }
.circularAnticlockwise svg { display: block; overflow: visible; transform: rotate(1deg);}
.circularAnticlockwise svg text{
            letter-spacing: 0px;
            fill:black;
            font-size: 8px;
        }

}
</style>