svg基础

<template>
  <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="600"
         style="border: 1px solid black;text-shadow: 10px 10px 10px black">

      <!--
      path命令:
        M = moveto 移动至
        L = lineto 直线至
        H = horizontal lineto 水平直线至
        V = vertical lineto 垂直直线至
        C = curveto 曲线至
        S = smooth curveto 平滑曲线至
        Q = quadratic Bézier curve 二次贝塞尔曲线
        T = smooth quadratic Bézier curveto 平滑二次贝塞尔曲线至
        A = elliptical Arc 椭圆弧
        Z = closepath 闭合路径
      注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

      矩形
      <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
            style="fill:red;stroke:black;stroke-width:5;opacity:0.5;"/>

      圆形
      <circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" fill="red"/>

      椭圆
      <ellipse cx="200" cy="200" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2"/>

      直线
      <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"/>

      多边形
      <polygon points="100,10 40,180 190,60 10,60 160,180"
               style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>

      折线
      <polyline points="0,40 40,40 40,0 0,0 0,40" style="fill:transparent;stroke:red;stroke-width:4"/>

      路径
      <path d="M300 0 L150 300 L450 300 Z" style="fill: red"></path>

      贝塞尔曲线
      <path d="M0 300 Q300 0 600 300" stroke="blue" stroke-width="5" fill="none" />

      组合
      <g stroke="red" stroke-width="5">
        <path d="M0 100 L300 100"></path>
        <path d="M0 200 L300 200"></path>
        <path d="M0 300 L300 300"></path>
      </g>

      文本
      <text x="100" y="100" fill="red" style="text-shadow: none">这是一段中文</text>

      引用路径
      <defs>
        <path id="beisaier" d="M0 300 Q300 0 600 300" stroke="blue" stroke-width="5" fill="none"/>
      </defs>
      <text x="300" fill="red">
        <textPath xlink:href="#beisaier">这是一段中文</textPath>
      </text>

      链接
      <a xlink:href="https://www.baidu.com">
        <text x="100" y="100" fill="blue">百度链接</text>
      </a>

      stroke属性
      <path d="M100 100 l400 0" stroke="red" stroke-width="5" stroke-linecap="butt" stroke-dasharray="20,10,5,5,5,10"></path>

      滤镜
      <defs>
        <filter id="filter" x="0" y="0">
          <feGaussianBlur in="SourceGraphic" stdDeviation="50"/>
        </filter>
      </defs>
      <rect x="100" y="100" width="100" height="100" stroke="green" stroke-width="3" fill="red" filter="url(#filter)"/>

      阴影
      <defs>
        <filter id="shadow" x="0" y="0" width="200%" height="200%">
          <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"/>
          <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10"/>
          <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
        </filter>
      </defs>
      <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#shadow)"/>

      线性渐变
      <defs>
        <linearGradient id="linearGradient" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
          <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
        </linearGradient>
      </defs>
      <rect x="100" y="100" width="200" height="100" fill="url(#linearGradient)"/>

      径向渐变
      <defs>
        <radialGradient id="radialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
          <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
        </radialGradient>
      </defs>
      <circle cx="300" cy="300" r="150" fill="url(#radialGradient)"/>
      -->

    </svg>
  </div>
</template>

<script>
  export default {
    name: "index",
  }
</script>

<style scoped>
</style>