Html代码SVG常用方法

原创已于 2023-11-02 20:08:21 修改 · 559 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html5 #html

于 2023-11-02 19:38:13 首次发布

Html+Css+Js 专栏收录该内容

13 篇文章

订阅专栏

标签类型

矩形

<rect>

width='xxx' height='xxx'

圆

组成:圆心点+半径 cx='',cy='',r=''

线

<line>

组成:起始坐标+结束坐标 x1='',y1='',x2='',y2=''

折线

组成:points='x0,y0,x1,x1.......'

多边形

组成:坐标1 坐标2 坐标3 .... points='x0,y0,x1,y1,x2,y2,....'

路径

<path>

大写表示绝对定位，小写表示相对定位。

例子:同等距离

相对定位	d='M 10 10 h 100' stroke='blue'
推荐(绝对定位)	d='M 10 10 H 110' stroke='blue'

路径参数

M	moveto	移动到某点 M(x,y)
L	lineto	画一条直线到某点 L(x,y)
H	horizontal lineto	画一条水平线到某点。H(x)
V	vertical lineto	画一条垂直线到某点。V(y)
C	curveto	三次贝塞尔曲线 C(x1,y1,x2,y2,x,y)
S	smooth curveto	平滑三次贝塞尔曲线 S(x2,y2,x,y)
Q	quadratic Belzier curve	二次贝塞尔曲线 Q(x1,y1,x,y)
T	smooth quadratic Belzier	curveto T(x,y)
A	elliptical	Arc弧形 A(rx,ry,xr,laf,sf,x,y)
Z	closepath	从结束点到开始点画一条直线，形成一个闭合的区域

属性参数

x,y	起始坐标
rx,ry	圆角
stroke	边框颜色
stroke-width/height	边框宽度/高度
stroke-opacity	笔触颜色透明度
fill	填充颜色
fill-opacity	填充颜色透明

点击图像链接跳转

<svg
  width="100%"
  height="100%"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <a xlink:href="https://www.xxx.com/" target="_blank">
    <rect
      x="10"
      y="10"
      width="150"
      height="100"
      style="fill: blue; stroke: pink; stroke-width: 5; opacity: 0.9"
    ></rect>
  </a>
</svg>

画方块

<svg width="100%" height="100%">
  <rect
    rx="10"
    ry="10"
    width="100"
    height="100"
    style="fill: rgb(0, 0, 255); stroke-width: 1; stroke: rgb(0, 0, 0)"
  ></rect>
</svg>

画圆

<svg width="100%" height="100%">
  <circle
    cx="50"
    cy="50"
    r="40"
    stroke="black"
    stroke-width="2"
    fill="red"
  ></circle>
</svg>

画椭圆

<svg
  width="100%"
  height="100%"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
>
  <ellipse
    cx="50"
    cy="60"
    rx="35"
    ry="50"
    style="fill: rgb(200, 100, 50); stroke: rgb(97, 67, 31); stroke-width: 2"
  ></ellipse>
</svg>

画三角

<svg
  width="100%"
  height="100%"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
>
  <polygon
    points="10,10,10,100,130,100,"
    style="fill: #cccccc; stroke: #000000; stroke-width: 1"
  ></polygon>
</svg>

画扇形

<svg viewBox="0 0 650 92" width="90%" height="100px">
  <path
    d="M 83 91 L 165 54 A 90 90 0 0 0 1 54 z"
    stroke-linejoin="round"
    stroke-width="2"
    stroke="#83b71c"
    stroke-opacity="1"
    fill="none"
    fill-opacity="1"
    stroke-dasharray=""
    stroke-dashoffset="0"
    stroke-linecap="butt"
  ></path>
</svg>

画五角星

<svg height="190">
  <polygon
    points="100,10 40,180 190,60 10,60 160,180"
    style="fill: red; stroke: blue; stroke-width: 3; fill-rule: evenodd"
  ></polygon>
</svg>

画线条

<svg width="100%" height="100%">
  <line
    x1="0"
    y1="0"
    x2="300"
    y2="300"
    style="stroke: rgb(99, 99, 99); stroke-width: 2"
  ></line>
</svg>

画折线

<svg width="100%" height="100%">
  <polyline
    points="0,0 0,20 20,20 20,40 40,40 40,60"
    style="fill: white; stroke: red; stroke-width: 2"
  ></polyline>
</svg>

path路径画方块

<svg xmlns="http://www.w3.org/2000/svg" height="150" width="150">
  <!--数字后加小数点 轮廓更加明显-->
  <path
    d=" M 20 10 H 120.5 V 110.5 H 20.5 V 10.5 "
    stroke="blue"
    fill="lightgrey"
  />
</svg>

动画渐变

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="20" width="250" height="250" style="fill: blue">
    <!--不透明度0~1的变化-->
    <animate
      attributeType="CSS"
      attributeName="opacity"
      from="1"
      to="0"
      dur="5s"
      repeatCount="indefinite"
    />
  </rect>
</svg>

动画_移动_旋转_缩放

<!--沿一个运动路径移动、旋转并缩放的文本 + 逐步放大并改变颜色的矩形 -->
<svg
  width="100%"
  height="100%"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
>
  <rect id="rec" x="300" y="100" width="300" height="100" style="fill: lime">
    <!--方块 坐标设置-->
    <animate
      attributeName="x"
      attributeType="XML"
      begin="0s"
      dur="6s"
      fill="freeze"
      from="300"
      to="0"
    />
    <animate
      attributeName="y"
      attributeType="XML"
      begin="0s"
      dur="6s"
      fill="freeze"
      from="100"
      to="0"
    />
    <!--方块 宽高设置-->
    <animate
      attributeName="width"
      attributeType="XML"
      begin="0s"
      dur="6s"
      fill="freeze"
      from="300"
      to="800"
    />
    <animate
      attributeName="height"
      attributeType="XML"
      begin="0s"
      dur="6s"
      fill="freeze"
      from="100"
      to="300"
    />
  </rect>
  <!--文字 坐标-->
  <g transform="translate(100,100)">
    <text
      id="TextElement"
      x="0"
      y="0"
      style="font-family: Verdana; font-size: 24; visibility: hidden"
    >
      It's SVG!
      <!--文字 移动中-->
      <set
        attributeName="visibility"
        attributeType="CSS"
        to="visible"
        begin="1s"
        dur="5s"
        fill="freeze"
      />
      <!--文字 移动结束-->
      <animateMotion path="M 0 0 L 100 100" begin="1s" dur="5s" fill="freeze" />
      <!--文字 旋转|放大-->
      <animateTransform
        attributeName="transform"
        attributeType="XML"
        type="rotate"
        from="-30"
        to="0"
        begin="1s"
        dur="5s"
        fill="freeze"
      />
      <animateTransform
        attributeName="transform"
        attributeType="XML"
        type="scale"
        from="1"
        to="3"
        additive="sum"
        begin="1s"
        dur="5s"
        fill="freeze"
      />
    </text>
  </g>
</svg>

画图_水平形渐变

<svg
  width="100%"
  height="100%"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
>
  <!--defs标签 关于渐变 -->
  <defs>
    <!-- fill:url(#orange_red) 属性把 ellipse 元素链接到此渐变 -->
    <!-- 定义id -->
    <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
      <!-- offset 渐变的开始和结束位置 -->
      <!-- 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 stop标签来规定。 -->
      <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>
  <!-- 绑定id -->
  <ellipse cx="200" cy="190" rx="85" ry="55" style="fill: url(#orange_red)" />
</svg>

画图_放射形渐变

<svg
  width="100%"
  height="100%"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
>
  <!-- radialGradient标签 放射性渐变 -->
  <!-- cx、cy、r 定义外圈  fx、fy 定义内圈  -->
  <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
    <stop offset="0%" style="stop-color: rgb(200, 200, 200); stop-opacity: 0" />
    <stop offset="100%" style="stop-color: rgb(0, 0, 255); stop-opacity: 1" />
  </radialGradient>
  <ellipse cx="230" cy="200" rx="110" ry="100" style="fill: url(#grey_blue)" />
</svg>

画图_文字渐变_ (浅色)

<svg
  width="100%"
  height="100%"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
>
  <defs>
    <linearGradient
      id="MyGrad"
      gradientUnits="userSpaceOnUse"
      x1="100"
      y1="0"
      x2="500"
      y2="0"
    >
      <stop offset="0" style="stop-color: #ff00ff" />
      <stop offset=".33" style="stop-color: #88ff88" />
      <stop offset=".67" style="stop-color: #2020ff" />
      <stop offset="1" style="stop-color: #d00000" />
    </linearGradient>
    <filter id="Matrix">
      <feColorMatrix
        type="matrix"
        values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
      />
    </filter>
    <filter id="Saturate">
      <feColorMatrix type="saturate" values="0.4" />
    </filter>
    <filter id="HueRotate">
      <feColorMatrix type="hueRotate" values="90" />
    </filter>
    <filter id="Luminance">
      <feColorMatrix type="luminanceToAlpha" result="a" />
      <feComposite in="SourceGraphic" in2="a" operator="in" />
    </filter>
  </defs>
  <g style="font-size: 50; fill: url(#MyGrad)">
    <text x="50" y="60">Unfiltered</text>
    <text x="50" y="120" style="filter: url(#Matrix)">Matrix</text>
    <text x="50" y="180" style="filter: url(#Saturate)">Saturate</text>
    <text x="50" y="240" style="filter: url(#HueRotate)">HueRotate</text>
    <text x="50" y="300" style="filter: url(#Luminance)">Luminance</text>
  </g>
</svg>

画图_文字渐变_ (深色)

<svg
  width="100%"
  height="100%"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
>
  <defs>
    <linearGradient
      id="MyGrad"
      gradientUnits="userSpaceOnUse"
      x1="50"
      y1="0"
      x2="600"
      y2="0"
    >
      <stop offset="0" stop-color="#ff0000" />
      <stop offset=".33" stop-color="#00ff00" />
      <stop offset=".67" stop-color="#0000ff" />
      <stop offset="1" stop-color="#000000" />
    </linearGradient>
    <filter id="Identity">
      <feComponentTransfer>
        <feFuncR type="identity" />
        <feFuncG type="identity" />
        <feFuncB type="identity" />
        <feFuncA type="identity" />
      </feComponentTransfer>
    </filter>
    <filter id="Table">
      <feComponentTransfer>
        <feFuncR type="table" tableValues="0 0 1 1" />
        <feFuncG type="table" tableValues="1 1 0 0" />
        <feFuncB type="table" tableValues="0 1 1 0" />
      </feComponentTransfer>
    </filter>
    <filter id="Linear">
      <feComponentTransfer>
        <feFuncR type="linear" slope=".5" intercept=".25" />
        <feFuncG type="linear" slope=".5" intercept="0" />
        <feFuncB type="linear" slope=".5" intercept=".5" />
      </feComponentTransfer>
    </filter>
    <filter id="Gamma">
      <feComponentTransfer>
        <feFuncR type="gamma" amplitude="2" exponent="5" offset="0" />
        <feFuncG type="gamma" amplitude="2" exponent="3" offset="0" />
        <feFuncB type="gamma" amplitude="2" exponent="1" offset="0" />
      </feComponentTransfer>
    </filter>
  </defs>
  <g font-size="50" font-weight="bold" fill="url(#MyGrad)">
    <text x="50" y="60" filter="url(#Identity)">Identity</text>
    <text x="50" y="120" filter="url(#Table)">TableLookup</text>
    <text x="50" y="180" filter="url(#Linear)">LinearFunc</text>
    <text x="50" y="240" filter="url(#Gamma)">GammaFunc</text>
  </g>
</svg>

滤镜_模糊

<svg
  width="100%"
  height="100%"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
>
  <defs>
    <!-- 定义 id -->
    <filter id="Gaussian_Blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
    </filter>
  </defs>
  <ellipse
    cx="200"
    cy="150"
    rx="70"
    ry="40"
    style="
      fill: #ff0000;
      stroke: #000000;
      stroke-width: 2;
      filter: url(#Gaussian_Blur);
    "
  />
</svg>

滤镜_阴影

<svg
  width="100%"
  height="100%"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
>
  <defs>
    <filter id="filter" x="0" y="0">
      <feGaussianBlur stdDeviation="5" />
      <feOffset dx="5" dy="5" />
    </filter>
  </defs>
  <rect width="90" height="90" fill="grey" filter="url(#filter)" />
  <rect width="90" height="90" fill="yellow" stroke="lightgrey" />
</svg>

滤镜_文字

<svg
  width="100%"
  height="100%"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
>
  <defs>
    <!-- filter标签 添加滤镜 -->
    <filter
      id="test"
      filterUnits="objectBoundingBox"
      x="0"
      y="0"
      width="1.5"
      height="4"
    >
      <!--阴影1-->
      <feOffset result="Off1" dx="15" dy="20" />
      <feFlood style="flood-color: #3cff00; flood-opacity: 0.8" />
      <feComposite in2="Off1" operator="in" result="C1" />
      <!--阴影2-->
      <feOffset in="SourceGraphic" result="Off2" dx="30" dy="40" />
      <feFlood style="flood-color: #e5ff00; flood-opacity: 0.4" />
      <feComposite in2="Off2" operator="in" result="C2" />
      <!--合并-->
      <feMerge>
        <feMergeNode in="C2" />
        <feMergeNode in="C1" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  <text
    x="30"
    y="100"
    style="font: 36px verdana bold; fill: blue; filter: url(#test)"
  >
    This is some text!
  </text>
</svg>