css 印章效果(环形文字)

最新推荐文章于 2024-08-09 16:25:45 发布

qq_31683775

最新推荐文章于 2024-08-09 16:25:45 发布

阅读量106

点赞数 1

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/qq_31683775/article/details/141062561

版权

<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>
                </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" />
                  <text>
                      <textPath xlink:href="#circle-seal">
                          南阳市建筑消防协会消防产品工作委员会
                      </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 black;

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

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

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


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

</style>