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...