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

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

SVG组成是属於向量图形(透过电脑计算路径形成的图形),因此在进行放大图形的时候也不会造成失真情况。
如下图这张是JPG
https://ithelp.ithome.com.tw/upload/images/20210918/20125095TaUyKz5ELS.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
https://ithelp.ithome.com.tw/upload/images/20210918/20125095GFsFML1978.jpg

基本的图形

  <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>表示将要绘制正方形或长方形widthheight指的是宽、高而fill表示填充的颜色
如下图
<circle>表示要绘制圆形cxcy表示圆心位置r代表半径fill一样表示填充的颜色
圆形同理如下图
https://ithelp.ithome.com.tw/upload/images/20210918/20125095Q8PzKHDDRh.jpg

SVG Line

line是线段的意思
x1y1为起始座标
x2y2为终点座标

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

程序码如下

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

https://ithelp.ithome.com.tw/upload/images/20210918/20125095gJte0kdX0y.png
一条蓝色的线段如上图就画出来了

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的样式,由於我们不会填满色彩所以fillnone然後线段的宽度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>

就可以得到一个三角形如下
https://ithelp.ithome.com.tw/upload/images/20210918/20125095mGsu7xux8B.png

同理我们再添加左边的一个对称的三角形,之後我们在三角形上面的顶点地方(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>

可以看到图片如下
https://ithelp.ithome.com.tw/upload/images/20210918/20125095FLLBdiRtQs.png
左边一样同理画出左三角形的中间的线,之後我们要做伞柄
首先一样从(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>

这时候图形会长这样
https://ithelp.ithome.com.tw/upload/images/20210918/20125095peQGqnOOrX.png

最後我们将要画出伞的圆弧形状,因此会动用到一A路径设定,从起始点(400,250)然後椭圆形的rxry半径都设为1来当作这个椭圆的垂直和水平的半径比,之後设定弧角与x轴x-axis-rotation把它设定成180然後由於角度设定是180度所以画出来应当是个半圆,因此large-arc-flag设定01并没有太大区别,而我们要给予一个逆时钟的方向因此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>

图形如下
https://ithelp.ithome.com.tw/upload/images/20210918/20125095YJvh1WzGjt.png

另外我们可以让伞柄的地方加粗写在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>

https://ithelp.ithome.com.tw/upload/images/20210918/20125095lnVRsrfqfO.png

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

MDN SVG教学


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

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

【Day 1】踏入机器学习的世界

前言 随着 人工智慧(Artificial Intelligence, AI) 的发展越来越快速, ...

day8_MacOs ARM 的文书工作之旅

Mac Book Arm 文书工作如何呢? Mac Book Arm 我个人觉得非常适合文书或业务使...

第59天~

这个得上一篇:https://ithelp.ithome.com.tw/articles/10262...

panel data regression in r

废话不多说,直接附上code 影片含有程序码详细解说,若有误再烦请告知,谢谢 library(plm...

[Python 爬虫这样学,一定是大拇指拉!] DAY28 - 实战演练:集大成 - 自动更新每日个股日成交资讯

自动更新每日个股日成交资讯 结合前几篇所学,我们来做一个可以自动更新日成交资讯的程序吧! Reque...