利用SVG标签制作一个电子发票的签章

最新推荐文章于 2024-06-27 00:06:13 发布

代码少女Zik -

最新推荐文章于 2024-06-27 00:06:13 发布

阅读量221

点赞数 4

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_62087405/article/details/138799652

版权

废话不多说，代码如下：

<template>
  <div>
    <div class="mod-e-invoice">
      <div class="invoice-content">
        <!-- 电子发票章 -->
        <div class="invoice">
          <svg viewBox="0,0,900,600" height="350">
            <!-- 外环 -->
            <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>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import invoiceTest from './ts/invoice-test';
export default invoiceTest;
</script>
<style lang="scss" scoped>
.mod-e-invoice {
  height: 600px;
  
  .invoice-content{
    height: 100%;
    position: relative;
    .invoice {
    transform: scale(0.3);
    width: 525px;
    margin: 0 auto;
    position: relative;
    top: -110px;
    .invoice-tip {
      text-anchor: middle;
      font-size: 20mm;
      fill: red;
      font-family: KaiTi;
    }
  }
  }

}
</style>

实现效果：