使用SVG实现边框特效及绘制图形

SVG
SVG
发布日期:   2020-06-16
更新日期:   2021-10-04
文章字数:   1.7k
阅读时长:   9 分
阅读次数:  

SVG

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

  • SVG 用来定义用于网络的基于矢量的图形

  • SVG 使用 XML 格式定义图形

  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

  • SVG 是万维网联盟的标准

  • SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

    SVG绘制矩形和圆角矩形

  • rect:绘制矩形标签;

  • x:矩形的左侧位置,定义矩形到左侧的距离是Xpx;

  • y:矩形的顶端位置,定义矩形到顶部的距离是Ypx;

  • rx/ry:是圆角半径;

  • style:

  • fill:填充颜色;

  • fill-opacity:填充颜色透明度;

  • stroke:描边颜色;

  • stroke-Width:描边宽度;

  • stroke-opacity:描边透明度;

    SVG绘制椭圆–

  • ellipse:绘制椭圆标签;

  • cx:定义椭圆中心的X坐标;

  • cy:定义椭圆中心的Y坐标;

  • rx:定义椭圆的水平半径;

  • ry:定义椭圆的垂直半径;

    SVG绘制直线–

  • line:绘制直线标签;

  • x1:直线起始点X坐标;

  • y1:直线起始点Y坐标;

  • x2:直线终止点X坐标;

  • y2:直线终止点Y坐标;

    demo

    百度 淘宝 四边框

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body,
    html {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #696969;
    }

    main {
      width: 200px;
    }

    svg {
      width: 200px;
      height: 50px;
      margin-bottom: 20px;
      background: #444;

      cursor: default;
    }

    rect#shape {
      fill: transparent;
      stroke: white;
      stroke-width: 6px;
      stroke-dasharray: 0 500;
      stroke-dashoffset: 0;
      transition: 0.5s ease;
      /* animation:dong 2s ease-in-out infinite alternate;
    */
    }

    svg:hover #shape {
      stroke-dasharray: 500 0;
      stroke-width: 6px;
      stroke: rgb(32, 213, 226);
    }

    @keyframes dong {
      100% {
        stroke-dasharray: 500 0;
        stroke-width: 6px;
        /* stroke-dashoffset:-250;
    */
        stroke: white;
      }
    }

    rect#one {
      fill: transparent;
      stroke: yellowgreen;
      stroke-width: 6px;
      stroke-dasharray: 0 500;
      stroke-dashoffset: 250;
      animation: dong1 2s ease-in-out infinite alternate;
    }

    @keyframes dong1 {
      100% {
        stroke-dasharray: 500 0;
        stroke-width: 6px;
        /* stroke-dashoffset:0;
    */
        stroke: greenyellow;
      }
    }

    rect#two {
      fill: transparent;
      stroke: rgb(233, 43, 43);
      stroke-width: 6px;
      stroke-dasharray: 200 300;
      stroke-dashoffset: 250;
      animation: dong2 2s ease-in-out infinite alternate;
    }

    @keyframes dong2 {
      100% {
        stroke-dasharray: 200 0;
        stroke-width: 6px;
        /* stroke-dashoffset:0;
    */
        stroke: rgb(233, 43, 43);
      }
    }

    rect#three {
      fill: transparent;
      stroke: rgb(233, 220, 43);
      stroke-width: 6px;
      stroke-dasharray: 50 450;
      stroke-dashoffset: 50;
      animation: dong3 2s ease-in-out infinite alternate;
    }

    rect#threes {
      fill: transparent;
      stroke: rgb(233, 103, 43);
      stroke-width: 6px;
      stroke-dasharray: 50 450;
      stroke-dashoffset: -200;
      animation: dong3 2s ease-in-out infinite alternate;
    }

    @keyframes dong3 {
      100% {
        stroke-dasharray: 500 0;
        stroke-width: 6px;
        /* stroke-dashoffset:-250;
    */
        stroke: rgb(233, 220, 43);
      }
    }

    rect#four {
      fill: transparent;
      stroke: skyblue;
      stroke-width: 6px;
      stroke-dasharray: 50 450;
      stroke-dashoffset: 150;
      transition: 0.5s ease;
      /* animation:dong4 2s ease infinite alternate;
    */
    }

    svg:hover #four {
      stroke-dasharray: 250 250;
    }

    rect#fours {
      fill: transparent;
      stroke: blue;
      stroke-width: 6px;
      stroke-dasharray: 50 450;
      stroke-dashoffset: 200;
      transition: 0.5s ease;
      /* animation:dong4s 2s ease infinite alternate;
    */
    }

    svg:hover #fours {
      stroke-dasharray: 250 50;
    }

    @keyframes dong4 {
      100% {
        stroke-dasharray: 250 250;
      }
    }

    @keyframes dong4s {
      100% {
        stroke-dasharray: 250 50;
      }
    }

    text {
      fill: white;
      font-size: 30px;
      transition: 0.5s linear;
    }

    svg:hover text {
      fill: rgb(30, 129, 223);
    }

    svg:hover .four {
      fill: rgb(231, 105, 21);
    }

    #five {
      fill: transparent;
      stroke: rgb(255, 0, 179);
      stroke-width: 6px;
      stroke-dasharray: 50 400;
      stroke-dashoffset: -75;
      stroke-opacity: 0;
      animation: dong5 1s linear infinite alternate;
    }

    @keyframes dong5 {
      100% {
        stroke-opacity: 1;
        stroke: rgb(192, 44, 180);
        stroke-dasharray: 50 20;
      }
    }

    #six {
      fill: transparent;
      stroke: rgb(0, 255, 21);
      stroke-width: 6px;
      stroke-dasharray: 50 400;
      stroke-dashoffset: 50;
      animation: dong6 1s linear infinite alternate;
    }

    @keyframes dong6 {
      100% {
        stroke: rgb(231, 250, 59);
        stroke-dasharray: 20 1;
      }
    }

    rect#svg-border {
      fill: transparent;
      stroke: white;
      stroke-width: 6px;
      stroke-dasharray: 0, 200, 0, 50, 0, 200, 0, 50;
      stroke-dashoffset: 0;
      transition: all .3s ease;
    }

    svg:hover #svg-border {
      stroke-dasharray: 200, 0, 50, 0, 200, 0, 50, 0;
      stroke-width: 6px;
      stroke: #58bc58;
    }
  </style>
</head>

<body>
  <main>
    <svg>
      <rect id="shape" height="50" width="200"></rect>
      <text x="70" y="35"><a href="###">百度</a></text>
    </svg>
    <svg>
      <rect id="one" height="50" width="200"></rect>
    </svg>
    <svg>
      <rect id="two" height="50" width="200"></rect>
    </svg>
    <svg>
      <rect id="three" height="50" width="200"></rect>
      <rect id="threes" height="50" width="200"></rect>
    </svg>
    <svg>
      <rect id="fours" height="50" width="200"></rect>
      <rect id="four" height="50" width="200"></rect>
      <text class="four" x="70" y="35"><a href="###">淘宝</a></text>
    </svg>
    <svg>
      <rect id="five" height="50" width="200"></rect>
    </svg>
    <svg>
      <rect id="six" height="50" width="200"></rect>
    </svg>
    <svg>
      <rect id="svg-border" height="50" width="200"></rect>
      <text x="55" y="35"><a href="###">四边框</a></text>
    </svg>
    <svg>
      <circle cx="100" cy="25" r="20" stroke="orange" stroke-width="6" fill="#ff5" />
    </svg>
    <svg>
      <rect x="25" y="10" width="150" height="30" style="fill:#ccc; stroke:orange; stroke-width:5px;" />
    </svg>
    <svg>
      <rect x="25" y="10" rx="15" ry="15" width="150" height="30"
        style="fill:#ccc; stroke:orange; stroke-width:5px; stroke-opacity:.5; fill-opacity:.9;" />
    </svg>
    <svg > 
      <line x1="5" y1="5" x2="190" y2="40" style="stroke:rgba(255, 0, 0, .5); stroke-width:5px;" /> 
    </svg>
    <svg> 
      <ellipse cx="100" cy="25" rx="50" ry="15" stroke="orange" stroke-width="5" fill="#000" fill-opacity=".5" /> 
    </svg>
  </main>
</body>

</html>
SVG
赏
  目录