svg基础

<template>
  <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center">
    <!--
    * 浏览器会将 viewBox 定义的坐标区域映射到 width/height 定义的实际渲染区域中。
      如果两者比例不同，SVG 内容会默认等比缩放以适应视口（可通过 preserveAspectRatio 调整）。
    * preserveAspectRatio="[对齐方式] [缩放模式]"
        - 对齐方式
            ~ xMidYMid：在视口中水平和垂直居中（默认）
            ~ xMinYMin：左上方对齐
            ~ xMaxYMax：右下方对齐
            ~ none：忽略纵横比，强制拉伸以填满视口
        - 缩放模式
            ~ meet：保持比例缩放，确保整个 viewBox 都能在视口中完整显示（默认值）。
            ~ slice：保持比例缩放，确保 viewBox 完全覆盖视口（超出部分会被裁剪）。
            ~ none：不进行等比缩放，直接拉伸内容以填满视口。
    -->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"
      viewBox="0 0 600 600"
      preserveAspectRatio="xMidYMid meet"
      width="600"
      height="auto"
      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)"/>

      图片
      -->
      <image href="https://www.w3school.com.cn/i/eg_mouse.jpg" x="50" y="50" width="200" height="200" />
    </svg>
  </div>
</template>

<script>
export default {
  name: 'Index'
}
</script>

<style scoped>
</style>