SVG矢量图形入门

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

- tspan 是 text 的分小组
- x、y 是作图区域起始坐标
- dx 、dy 是x、y坐标的偏移量

posted @ 2021-05-06 16:16 365/24/60 阅读(175) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· winform 绘制太阳，地球，月球运作规律
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

365/24/60

SVG矢量图形入门

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

文章分类

文章档案

阅读排行榜