D3JsDay03可缩放向量图型不用怕图片不行—SVG简介

由於D3Js的组成部分来自於操控SVG(Scalable Vector Graphics)，所以简单介绍一下SVG。

SVG组成是属於向量图形(透过电脑计算路径形成的图形)，因此在进行放大图形的时候也不会造成失真情况。
如下图这张是JPG

下面这个是SVG如果你CTRL+滑鼠滚轮无限放大的时候就可以发现JPG会有出现锯齿状的情况，但是SVG不会。

程序码范例

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <text x="50" y="50" style="font-size:50px">
      A
    </text>
</svg>

可以将code 贴到html body的地方看一下渲染画面，当一直放大的时候的字母A并不会出现锯齿状

w3c所制定的标准，因此可以搭配DOM和CSS或者script操作。

我们可以想像成SVG为一个画布，以下绘制两个宽高为300px的画布
以下这张图显示画布为300

基本的图形

  <svg width="300" height="300">
        <rect width="50" height="200" fill="pink" />
  </svg>
  <svg width="300" height="300">
      <circle cx="200" cy="100" r="25" fill="lightgreen" />
  </svg>

<rect>表示将要绘制正方形或长方形width和height指的是宽、高而fill表示填充的颜色
如下图
<circle>表示要绘制圆形cx和cy表示圆心位置r代表半径fill一样表示填充的颜色
圆形同理如下图

SVG Line

line是线段的意思
x1和y1为起始座标
x2和y2为终点座标

stroke属性为线段的颜色
stroke-width为线段的粗细

程序码如下

<svg height="500" width="500">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:blue;stroke-width:2" />
</svg>

一条蓝色的线段如上图就画出来了

SVG path

svg路径可以拿来产生线条、曲线、圆弧等等的形状
这边以接下来会画的图形的部分做简单介绍

字母	填入参数	说明
M	x,y	移到
L	x,y	划一条线
V	x,y	垂直线
H	x,y	水平线
Z		把目前的座标和第一个的点连接成为封闭路径
A	rx,ry,x-axis-rotation,large-arc-flag,sweep-flag ,x,y	这边主要有7个点 rx ry表示椭圆的半径 x-axis-rotation表示弧线与X轴的夹角 large-arc-flag 1为大角度的弧线 0为小角度的弧线 sweep-flag 1表示顺时钟方向 0表示逆时钟方向最後的x和y是终点座标x,y

接下来我们尝试着这些来画个雨伞吧。

首先先撰写画布大小是宽800高450，在style的地方撰写path的样式，由於我们不会填满色彩所以fill是none然後线段的宽度stroke-width设为1
从起始点为整个画布的中间开始所以是M400 225然後H450画出水平线段，之後画出L的终点位置x是400 y是105所以写下L400 105最後加上Z自动关闭曲线
程序码如下

<style>
  svg path{
     fill:none; 
     stroke-width:1;
  }
</style>
<body>
  <svg width="800" height="450">
    <path d="M400 225 H450 L400 105 Z " stroke="black" />
  </svg>
</body>

就可以得到一个三角形如下

同理我们再添加左边的一个对称的三角形，之後我们在三角形上面的顶点地方(400,105)作为起位置画线段到(425 225)
程序码如下

<svg width="800" height="450">
  <path d="M400 225 H450 L400 105 Z " stroke="black" />
  <path d="M400 225 H350 L400 105 Z " stroke="black" />
  <path d="M400 105 L425 225" stroke="black" />
</svg>

可以看到图片如下

左边一样同理画出左三角形的中间的线，之後我们要做伞柄
首先一样从(400,225)的点开始这时候画出一个垂直线到y250的位置
程序码如下

<svg width="800" height="450">
  <path d="M400 225 H450 L400 105 Z " stroke="black" />
  <path d="M400 225 H350 L400 105 Z " stroke="black" />
  <path d="M400 105 L425 225" stroke="black" />
  <path d="M400 105 L375 225" stroke="black" />
  <path d="M400 225 V250" stroke="black" />
</svg>

这时候图形会长这样

最後我们将要画出伞的圆弧形状，因此会动用到一A路径设定，从起始点(400,250)然後椭圆形的rx和ry半径都设为1来当作这个椭圆的垂直和水平的半径比，之後设定弧角与x轴x-axis-rotation把它设定成180然後由於角度设定是180度所以画出来应当是个半圆，因此large-arc-flag设定0或1并没有太大区别，而我们要给予一个逆时钟的方向因此sweep-flag设定0(可以设定1看看图形从中了解差别)最後给予终点座标(425,250)

程序码如下

<svg width="800" height="450">
  <path d="M400 225 H450 L400 105 Z " stroke="black" />
  <path d="M400 225 H350 L400 105 Z " stroke="black" />
  <path d="M400 105 L425 225" stroke="black" />
  <path d="M400 105 L375 225" stroke="black" />
  <path d="M400 225 V250" stroke="black" />
  <path d="M400 250 A1 1 180 1 0 425 250" stroke="#000" fill="none"/>
</svg>

图形如下

另外我们可以让伞柄的地方加粗写在css属性上面，所以用css选取器选取最後两个元素更改粗细
最後程序码和图形如下

<style>
  svg path{
     fill:none; 
     stroke-width:1;
  }
  svg path:nth-of-type(5){
     stroke-width:2;
  }
  svg path:last-of-type{
     stroke-width:4;
  }
</style>

<svg width="800" height="450">
  <path d="M400 225 H450 L400 105 Z " stroke="black" />
   <path d="M400 225 H350 L400 105 Z " stroke="black" />
  <path d="M400 105 L425 225" stroke="black" />
  <path d="M400 105 L375 225" stroke="black" />
  <path d="M400 225 V250" stroke="black" />
  <path d="M400 250 A1 1 180 1 0 425 250" stroke="#000" fill="none"/>
</svg>

由於svg可以动用的属性实在很多，笔者简单介绍一下svg的基本概念，有兴趣的读者也可以参考MDN其他介绍

MDN SVG教学

<<: [Day16] 学 Reactstrap 就离 React 不远了～用 Tooltips 认识 useEffect

>>: [Day3] HTTP Verb/Method Tampering - HTTP 动词窜改

D3JsDay03可缩放向量图型不用怕图片不行—SVG简介

基本的图形

SVG Line

SVG path

【第四天 - Flutter BottomNavigationBar（上）Animation】

Day 21 装设开源的 Libre-Office

JavaScript Day 29. 立即函式 IIFE

爬虫怎麽爬从零开始的爬虫自学 DAY19 python网路爬虫开爬-2网页解析

2022重拾程序-练英打

[Day22] Deployment Manager

机器学习：资料流图(Data Flow Graphs)模型训练架构

Day 27 - 成本估计与 Amazon DynamoDB

Day 10 | 进阶清单元件 - ViewHolder

Orthogonal 3D 投影