Study - SVG & D3基础

最新推荐文章于 2024-08-26 20:51:18 发布

OOOOOOh~

最新推荐文章于 2024-08-26 20:51:18 发布

阅读量169

点赞数

文章标签： SVG

原文链接：https://github.com/junruchen/junruchen.github.io/wiki/SVG%E5%9F%BA%E7%A1%80%E4%B9%8B%E5%86%85%E9%83%A8%E5%85%83%E7%B4%A0

版权

What SVG❓

SVG ➡️ Scalable Vector Graphics ➡️ 可伸缩矢量图形

SVG 是一种使用XML技术描述二维图形的语言，简单来说 ➡️矢量图(不失真)

Why SVG❓

SVG不依赖于分辨率，使用DOM或绑定事件，实现大型渲染区域的应用(地图类)
SVG的优势
- 可以使用文本编辑器创建和修改
- SVG可被搜索、索引
- SVG绘制的图像不失真

SVG坐标系

y轴向下
顺时针方向的角度为正值

svg为inline水平元素。且需要绘制的所有图形都应被包含在 <svg></svg>标签内

D3图形元素

图形
- 矩形 <rect>
```
 <svg width="200" height="200">
	<rect x="10" y="10" width="100" height="100" rx="5" ry="5" fill="yellow"></rect>
 </svg>
```
  参数说明：
  - x：左上角x的坐标，距离左边的距离，相当于margin-left
  - y：左上角y的坐标，距离顶部的距离，相当于margin-top
  - width：矩形的宽度
  - height：矩形的高度
  - rx：圆角矩形，x轴方向的半径
  - ry：圆角矩形，y轴方向的半径
  - fill：设置填充颜色
- 圆形 <circle>
```
 <svg width="200" height="200">
 	 <circle cx="50" cy="50" r="40" fill="yellow"></circle>
 </svg>
```
  参数说明：
  - cx：圆心的x坐标
  - cy：圆心的y坐标
  - r：半径
- 椭圆 <ellipse>
```
 <svg width="200" height="200">
	 <ellipse cx="50" cy="50" rx="40" ry="20" fill="yellow"></ellipse>
 </svg>
```
  参数说明：
  - cx：圆心的x坐标
  - cy：圆心的y坐标
  - rx：水平方向上的半径
  - ry：垂直方向上的半径
- 线 <line>
```
 <svg width="200" height="200">
  	<line x1="10" y1="10" x2="90" y2="90" stroke="yellow"></line>
 </svg>
```
  参数说明：
  - x1：起点的x坐标
  - y1：起点的y坐标
  - x2：终点的x坐标
  - y2：终点的y坐标
- 折线 <polyline> (不会将起点与终点连接)
```
 <svg width="200" height="200">
  	<polyline points="50,10 80,90 10,30 90,30 20,90" stroke="#fb3" stroke-width="3" fill="transparent"></polyline>
 </svg>
```
  参数说明：
  - points：设置各个点的坐标，各组坐标之间使用空格分割，x坐标与y坐标之间使用逗号分割
- 多边形 <polygon> (将起点与终点连接)
```
 <svg width="200" height="200">
 	<polygon points="50,10 80,90 10,30 90,30 20,90" stroke="#fb3" stroke-width="3" fill="transparent"></polygon>
 </svg>
```
  参数说明：
  - points：设置各个点的坐标，各组坐标之间使用空格分割，x坐标与y坐标之间使用逗号分割
- 路径 <path>
  
  使用d属性控制路径的类型及绘制。路径的功能最多，前面的所有图形均可使用路径进行绘制
  
  d属性的书写格式有两种
  - 可以使用逗号分割坐标，如：d=“M10, 10”
  - 也可使用空格的形式，如：d=“M 10 10”
  - 注：
    - 大写字母：表示坐标系中使用绝对坐标
    - 小写字母：使用相对坐标（相对当前画笔所在的点）
  - 参数：
    - 移动类参数
      - M（moveto）：将画笔移动到指定坐标
        eg. ➡️ d=“M10, 10”，表示将画笔移动到坐标（10，10）的位置
    - 直线类参数
      - L（lineto）：绘制直线到指定坐标
        eg. ➡️ d=“M10, 10 L 80 80”，表示绘制一条起点坐标为（10，10），终点坐标为（80，80）的直线
      - H（horizontal lineto）：绘制水平直线到指定坐标
        eg. ➡️ d=“M10, 10 H 100”，表示绘制一条起点坐标为（10，10），终点坐标为（100，10）的直线
        注意：H只需要设置一个值，如果设置多个值，则取最后一个值、
      - V（vertical lineto）：绘制垂直直线到指定坐标
        eg. ➡️ d=“M10, 10 V 100”，表示绘制一条起点坐标为（10，10），终点坐标为（10，100）的直线
        注意：V只需要设置一个值，如果设置多个值，则取最后一个值
    - 曲线类参数
      - C（curveto）：绘制三次方贝塞尔曲线到终点坐标，中间经过两个控制点控制曲线的弧度，所以需指定三个坐标来绘制曲线
        eg. ➡️ d=“M10,10 C40,5 40,140 100,100”
      - S（shorthand/smooth curveto）：绘制平滑三次方贝塞尔曲线到终点坐标，与上一条三次方贝塞尔曲线相连，第一个控制点为上一条曲线第二个控制点的对称点，所以还需指定一个控制点坐标和终点坐标
        eg. ➡️ d=“M10,10 C40,5 40,140 100,100 S140,180 160,160”
        如果不与上一条相连，即 ➡️d=“M10,10 S140,180 160,160”，则绘制的图线接近于二次贝塞尔曲线
      - Q（quadratic Bezier curveto）：绘制二次贝塞尔曲线到终点坐标，中间经过一个控制点控制曲线的弧度
        eg. ➡️ d=“M10,10 Q40,140 100,100”
      - T（shorthand/smooth quadratic Bezier curveto）：绘制平滑二次贝塞尔曲线到终点坐标，与上一条二次贝塞尔曲线相连，控制点为上一条曲线控制点的对称点，所以还需指定一个终点坐标
        eg. ➡️ d=“M10,10 Q40,140 100,100 T160,160”
        如果不与上一条相连，即：d=“M10,10 T160,160”，则绘制的图线是一条直线
      - eg
```
	/* C */
	<svg width="200" height="200">
	  <path d="M10,10 C40,5 40,140 100,100" stroke="#fb3" stroke-width="4px" fill="transparent"></path>
	</svg>
	
	/* S */
	<svg width="200" height="200">
	  <path d="M10,10 C40,5 40,140 100,100 S140,180 160,160" stroke="#fb3" stroke-width="4px" fill="transparent"></path>
	</svg>
	
	/* Q */
	<svg width="200" height="200">
	  <path d="M10,10 Q40,140 100,100" stroke="#fb3" stroke-width="4px" fill="transparent"></path>
	</svg>
	
	/* T*/
	<svg width="200" height="200">
	  <path d="M10,10 Q40,140 100,100 T160,160" stroke="#fb3" stroke-width="4px" fill="transparent"></path>
	</svg>
```
  - 弧线类参数
    - A（el liptical arc）：绘制椭圆曲线到指定坐标，需设置的参数有：
      - rx ry：x轴方向半径、y轴方向半径
      - x-axis-rotation：x轴与水平顺时针方向夹角
      - large-arc-flag：角度弧线大小(1:大 0:小)
      - sweep-flag：绘制方向(1:顺时针 0:逆时针到终点)
      - x y：终点坐标
    - eg. ➡️
```
 <svg width="500" height="500">
	<path d="M50,50 A60 30 0 1,0 150,50 Z" stroke="#fb3" stroke-width="4px" fill="transparent"></path>
 </svg>
```
    - 说明：
      - 起点坐标（50，50）
      - 终点坐标（150，50）
      - 角度为0
      - 角度弧线大小 large-arc-flag为1，选择大弧度，根据下面分析图，即选择红色的弧线
      - 绘制方向sweep-flag为0，为逆时针，即从起点沿逆时针防线绘制到终点，所以红色弧线位于下方
    - img⬇️
    - 注：
      当 (起点与终点之间的直线距离／2) > (椭圆的水平半径) 时，角度为0的情况下，此时椭圆会等比放大，到相等为止
  - 闭合类参数
    - Z（closepath）：绘制直线将终点与起点连接
      参考文章：https://github.com/junruchen/junruchen.github.io/wiki/SVG%E5%9F%BA%E7%A1%80%E4%B9%8B%E5%86%85%E9%83%A8%E5%85%83%E7%B4%A0