SVG 自学微笔记(03) - 绘製圆形、椭圆形 & 线段

不定更新、可能烂尾XD

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

这篇笔记使用到的图形属性，基本上都跟矩形那篇差不多。

SVG : 圆形

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

<svg></svg>

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

<circle></circle> 或 <circle />

cx : 圆心初始的 x 座标cy : 圆心初始的 y 座标r : 圆的半径sroke : 图形外框颜色stroke-width : 图形外框宽度fill : 图形填满颜色fill-opacity : 调整图形填满颜色的透明度stroke-opacity : 调整图形外框颜色的透明度

範例1

<svg height="500" width="500">    <circle cx="100" cy="100" r="50" fill="wheat"     stroke="black" stroke-width="5"></circle></svg>

範例2

<svg height="500" width="500">    <circle cx="100" cy="100" r="50" fill="wheat"     stroke="black" stroke-width="5" fill-opacity="0.5"    stroke-opacity="0.5"></circle></svg>

SVG : 椭圆形

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

<svg></svg>

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

<ellipse></ellipse> 或 <ellipse />

cx : 圆心初始的 x 座标cy : 圆心初始的 y 座标rx : 圆的水平方向半径ry : 圆的垂直方向半径sroke : 图形外框颜色stroke-width : 图形外框宽度fill : 图形填满颜色fill-opacity : 调整图形填满颜色的透明度stroke-opacity : 调整图形外框颜色的透明度

　备注 : 椭圆跟圆形不同的地方在于需要明确设定垂直和水平方向的半径长度。

範例1

<svg height="500" width="500">    <ellipse cx="150" cy="100" rx="100" ry="50" fill="rgb(255, 183, 197)"     stroke="green" stroke-width="5"></ellipse></svg>

範例2

<svg height="500" width="500">    <ellipse cx="150" cy="100" rx="100" ry="50" fill="rgb(255, 183, 197)"     stroke="green" stroke-width="5" fill-opacity="0.5"    stroke-opacity="0.5"></ellipse></svg>

备注 : 椭圆的rx、ry如果设定相同的数值会变成圆喔!

SVG : 线段

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

<svg></svg>

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

<line></line> 或 <line />

x1 : 线段起始点的 x 座标y1 : 线段起始点的 y 座标x2 : 线段终点的 x 座标y2 : 线端终点的 y 座标sroke : 线段颜色stroke-width : 线段宽度stroke-opacity : 线段的透明度

範例1

<svg height="500" width="500">    <line x1="100" y1="50" x2="300" y2="150"     stroke-width="5" stroke="green"></line></svg>

範例2

<svg height="500" width="500">    <line x1="100" y1="50" x2="300" y2="150"     stroke-width="5" stroke="black" stroke-opacity="0.5"></line></svg>

备注 : 2个点无法构成一个封闭的区域，所以线段就不会有先前图形都有的fill相关属性喔!