SVG绘画
什么是SVG？
SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用來定義用于網絡的基于矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失
Ai的矢量圖形與SVG一致，不會因為網頁的放大縮小而改變圖片的質量
并且SVG可以利用代碼自由的改變顏色/大小
那么就直接來分析代碼吧
代碼分析
首先定義一個SVG
這個SVG 是用來裝載circle屬性
可以在一個SVG中聲明多個Circle屬性
Circle：聲明一條線的屬性
?
然后再聲明這個值（Circle）所規定的范圍
?cx="10"?cy="10"代表著位置
?
一般是由位置（例如 左邊: left?）的第一個字與X/Y軸一起組成
例如 l+y=ly 那么就會定義成 左上 ?可以通過各種方法來改變SVG生成的位置
其他兩個就是普普通通的代碼了
stroke="black" 邊框為黑色線條
stroke-width="2" 邊框的厚度
fill="red" 里面的顏色為紅色
當然svg里也有預設的圖片 所以可以套用
- 矩形 <rect>
- 圓形 <circle>
- 橢圓 <ellipse>
- 線 <line>
- 折線 <polyline>
- 多邊形 <polygon>
- 路徑 <path>
成品展示
代碼展示
?
<!DOCTYPE html>
<html>
<body>
<h1>一個圓圈</h1>
<svg>???????
?? <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>?
</body>
</html>
總結
- 上一篇： Bibexcel 与 Pajek 基本分
- 下一篇： 9 客户端认证方式 之 PKCE