svg標籤詳解

2021-10-01 08:32:46 字數 975 閱讀 8057

svg(scalable vector graphics)is an xml-based language for creating graphics.

這是mdn英文文件對svg的介紹。

svg支援css,這一點有效的將圖形和樣式區分開。

svg的應用:

1、繪圖

2、動畫

svg元素可以通過、或者嵌入網頁之中,但是我們這裡推薦使用,

相容性比較好。

fill: 填充色 | url(id)這裡主要是引用漸變色作為背景

stroke: 線條的顏色

stroke-width: 線條的寬度

stroke-linecap: 線條末尾的樣式 (預設)butt (圓角)round (方形)square ,round和square會影響線條的長度

opacity: 不透明度 0~1

fill-rule: nonzero (非零環繞原則)evenodd

stroke-dasharray: 建立虛線陣列 x,y,z,… (長度,間隔,長度,間隔,。。。。)

stroke-dashoffset: 偏移

filter: url(id) 新增濾鏡

clippath-裁剪

能限制哪些地方可見,哪些地方不可見。標記指定的區域之外的所有內容都不會被顯示(影象不會被繪製出來)。剪下路徑是用clippath元素定義的,屬性clip-path可用來引用剪下路徑。預設情況下,乙個形狀,其被剪下掉的區域(不可見的區域)是不響應滑鼠事件的。

g-分組

g 標記就是』group』的簡寫,是用來分組用的,它能把多個元素放在一組裡,對 g 標記實施的樣式和渲染會作用到這個分組內的所有元素上。組內的所有元素都會繼承 g 標記上的所有屬性。用定義的分組還可以使用 use 進行複製使用。

拷貝(x, y): 轉殖物件的左上角座標

width: 轉殖物件的寬度

height: 轉殖物件的高度

xlink:href 引用轉殖物件

svg中path標籤的用法

除了上次的六個普通標籤之外,svg還支援複雜的路徑標籤 path 使用path標籤時,就像用指令的方式來控制乙隻畫筆,比如 移動畫筆到某一座標位置,畫一條線,畫一條曲線,完事了抬起畫筆,over!path支援的指令有 m moveto m x,y 將畫筆移動到指定的座標位置 l lineto l x...

svg中path標籤的用法

svg的 元素用於定義一些複雜的圖形。是svg基本圖形中最為複雜的。結構 m開始 到 z關閉路徑定義路徑資料命令 m moveto m x,y 將畫筆移動到指定的座標位置 l lineto l x,y 畫直線到指定的座標位置 h horizontal lineto h x 畫水平線到指定的x座標位置...

html5 svg標籤使用基礎三

html5 svg 標籤 濾鏡 path 它開始於位置 250 150,到達位置 150 350,然後從那裡開始到 350 350,最後在 250 150 關閉路徑。繪製圓弧指令 a rx ry x axis rotation large arc flag sweep flag x y 用圓弧連線2...