SVG 自学微笔记(02) - 绘製矩形 & 补充说明

不定更新、可能烂尾XD

学习资源: W3Schools、其他网路资料

前置 : 开发环境

在开始画SVG图形前，需要先建好开发环境，以下是我的配置 :

(浏览器、原始码编辑器、扩充套件)

ChromeMicrosoft Visual Studio CodeLive Server (即时预览网页)Prettier - Code formatter (原始码自动排版)IntelliCode (自动带入关键字)Chinese (Traditional) Language Pack for Visual Studio Code (介面中文化)

这边不赘述要怎么装上面的东西，可以自行摸索并不会太困难!

备注 : 写网页的时候，建议先透过reset.css之类的东西把浏览器预设的CSS样式清除，以免实际效果跟预期存在落差。不清除的话，就算把图形初始坐标定在(0,0)，图形也不会完全贴在浏览器视窗的左上角，这是因为浏览器有帮body设定CSS的margin属性。

(以Chrome为例)

SVG 图形属性

SVG 图形的属性写法并不唯一，可以把属性都包在style里面，也可以把它们独立出来，我个人是比较偏好第二种写法，之后也会用它来举例。

无论使用下面哪一种写法都会得到相同的矩形 (如上图)。

属性包在style里面

<svg height="500" width="800">    <rect x="50" y="50" width="350" height="350" style="fill:wheat;    stroke:black;stroke-width: 3;"/></svg>

属性独立出来

<svg height="500" width="800">    <rect x="50" y="50" width="350" height="350"     fill="wheat" stroke="black" stroke-width="3"/></svg>

备注 : 在SVG里面，每个图形都是一个独立的element，并且每个<svg></svg>都可以包含複数个图形(element)。

SVG : 矩形

(仅列出部分有使用到的属性)

<svg></svg>

height : 整个图形(画布)的原始长度width: 整个图形(画布)的原始宽度

<rect></rect> 或 <rect />

height : 图形的原始长度width: 图形的原始宽度x : 图形起始的 x 座标y : 图形起始的 y 座标sroke : 图形外框颜色stroke-width : 图形外框宽度fill : 图形填满颜色fill-opacity : 调整图形填满颜色的透明度stroke-opacity : 调整图形外框颜色的透明度rx、ry : 调整图形圆角的幅度

範例1

<svg height="500" width="800">    <rect x="50" y="50" width="350" height="350" fill="skyblue"     stroke="black" stroke-width="3" fill-opacity="0.5" stroke-opacity="0.8"/></svg>

範例2

<svg height="500" width="800">    <rect x="50" y="50" rx="20" ry="20" width="350" height="350"     fill="skyblue" stroke="black" stroke-width="3"     fill-opacity="0.5" stroke-opacity="0.8"/></svg>

备注 : rx、ry 的数值如果太大，矩形就会变成圆形喔~