當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

SVG绘画

發(fā)布時間：2024/1/8 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 SVG绘画小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

什么是SVG？

SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)

SVG 用來定義用于網絡的基于矢量的圖形

SVG 使用 XML 格式定義圖形

SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失

Ai的矢量圖形與SVG一致，不會因為網頁的放大縮小而改變圖片的質量

并且SVG可以利用代碼自由的改變顏色/大小

那么就直接來分析代碼吧

首先定義一個SVG

這個SVG 是用來裝載circle屬性

可以在一個SVG中聲明多個Circle屬性

Circle：聲明一條線的屬性

然后再聲明這個值（Circle）所規(guī)定的范圍

?cx="10"?cy="10"代表著位置

一般是由位置（例如左邊: left?）的第一個字與X/Y軸一起組成

例如 l+y=ly 那么就會定義成左上 ?可以通過各種方法來改變SVG生成的位置
其他兩個就是普普通通的代碼了

stroke="black" 邊框為黑色線條

stroke-width="2" 邊框的厚度

fill="red" 里面的顏色為紅色

當然svg里也有預設的圖片所以可以套用

成品展示

代碼展示

<!DOCTYPE html>

<html>

<body>

<svg>???????

?? <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />

</svg>?

</body>

</html>

以上是生活随笔為你收集整理的SVG绘画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。