Fork me on GitHub

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

SVG矢量图形入门

Svg学习笔记 <body> <div> <p class="f1">SVG：可缩放矢量图形（Scalable Vector Graphics）</p> <ul> <li> <p>HTML页面中使用SVG</p> <ul> <li> <p>直接在HTML嵌入SVG代码</p> <p class="i2"></p> </li> </ul> </li> <li> <p>基本类型： <ul> <li> <p>矩形 rect(rectangle)</p> <ul> <li>width:长方形宽 height:高 <p>（不能放在style中）</p></li> <li>可以放在style中 <ul> <li>fill:red(填充颜色) fill-opacity:0~1(填充颜色透明度)</li> <li> <ul> <p>边框</p> <li> <p>stroke：边框颜色</p> <p>stroke-width: 边框宽度</p> <p>stroke-opacity: 边框透明度</p> <p>stroke-dasharray: 边线短横线/间隔的长度数组[5,5]</p> <p>stroke-linecap: 开放路径描边的形状 butt | round | square | inherit</p> </li> </ul> </li> </ul> </li> <li> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100"
  style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

  • 圆形 circle

    • <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>
      • cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
      • r属性定义圆的半径

  • 椭圆 ellipse

    • <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>

    • cx、cy 椭圆中心点

      rx、ry：水平/竖直半径

  • 直线 line

    • <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="200" y2="200"
  style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>
    • x1、y1：起点坐标 x2、y2：终点坐标

  • 变体：多条直线 

    • <svg  xmlns="http://www.w3.org/2000/svg"
      // 定义画布长宽，  这里使用2种不同的如果都用line完成，其不能新开一条线，第二条线会首尾相连
      height="400"   width="200"   version="1.1" >
     <polyline  points="0,1 120,1 120,382 0,382"
       style="fill: none; stroke: #777777; stroke-width: 1"/>
     <line  x1="0" y1="176" x2="160"  y2="176"
       style="stroke: #777777; stroke-width: 1" />
</svg>

  • polygon 不少于三个边的图形

    • <svg  height="210" width="500">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

      // 五角星
<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

    • points:依次连接的顶点

      fill-rule:nonzero | evenodd | inherit

      • nonzero:从该点出发任意方向射线，顶点连接路径由左至右穿过射线+1，反之-1，计数为0在图形内部，反之外部不渲染
      • evenodd：计数为奇数则在内部，偶数在外部

  • polyline 只有直线的形状(折线)

    • <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" />
</svg>
    • 依次将各点连接即可

  • 路径 path

      • M = moveto
      • L = lineto
      • H = horizontal lineto
      • V = vertical lineto
      • C = curveto
      • Q = quadratic Bézier curve
      • T = smooth quadratic Bézier curveto
      • A = elliptical Arc
      • Z = closepath
      • 允许小写字母。大写表示绝对定位，小写表示相对定位
    • <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M150 0 L75 200 L225 200 Z" />
</svg>

  • text 文本

    • <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="10" y="20" style="fill:red;">Several lines:
    <tspan x="10" y="45">First line</tspan>
    <tspan x="10" y="70">Second line</tspan>
  </text>
</svg>
      Several lines: First line Second line
      • tspan 是 text 的分小组
      • x、y 是作图区域起始坐标
      • dx 、dy 是x、y坐标的偏移量
    • posted @ 2021-05-06 16:16  365/24/60  阅读(218)  评论(0)    收藏  举报