SVG篇之画图

最新推荐文章于 2024-10-10 10:50:43 发布

这个一个非常哈

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量222

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/ae_pppppp/article/details/140791669

版权

 <svg xmlns="" viewBox="0 0 320 320">
        <g fill="#1e80ff">
          <rect x="48" y="79" width="0.5" height="5" />
          <text x="50" y="85" font-size="5px" >寸</text>
          <rect x="68" y="79" width="0.5" height="3" />
          <text x="75" y="85" font-size="5px" >关</text>
          <rect x="88" y="79" width="0.5" height="3" />
          <text x="101" y="85" font-size="5px" >尺</text>
          <rect x="108" y="79" width="0.5" height="5" />
        </g>
        <g fill="#1e80ff">
          <text x="30" y="30" font-size="5px" >浮</text>
          <text x="30" y="50" font-size="5px" >中</text>
          <text x="30" y="70" font-size="5px" >沉</text>
        </g>
        <g stroke="#1e80ff" stroke-width="0.5">
          <line x1="40" x2="120" y1="20" y2="20" />
          <line x1="40" x2="120" y1="40" y2="40" stroke-dasharray="2,2" />
          <line x1="40" x2="120" y1="60" y2="60" stroke-dasharray="2,2" />
          <line x1="40" x2="120" y1="80" y2="80" />
        </g>
        <defs>
          <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
            <circle cx="3" cy="3" r="1.5" fill="red" />
            <circle cx="6" cy="6" r="1.5" fill="red" />
            <circle cx="9" cy="9" r="1.5" fill="red" />
            <circle cx="12" cy="12" r="1.5" fill="red" />
          </pattern>
        </defs>
        <path d="M50,40 Q70,10 80,40 T110,40" fill="none" stroke="#1e80ff" stroke-width="4" stroke-linecap="round" />
        <path d="M50,40 Q70,10 80,40 T110,40" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" />
        <path d="M50,40 Q70,10 80,40 T110,40" fill="none" stroke="url(#star)" stroke-width="2" stroke-linecap="round" />
      </svg>