SVG主要元素和屬性

2021-05-24 14:22:05 字數 2799 閱讀 2854

svg主要元素和屬性

注釋預定義 待引用 引用屬性:url(#name)

引用元素

模版width height不能省

屬性 xml:space="default|preserve" 英文空格

屬性 externalresourcerequired="false|true" 必需外部資源與否 若為true 找不到外部資源

不支援<>選擇 平台

rx ry橢圓半徑

圓角矩形的圓角過渡部分是一段四分之一的橢圓弧, 分別代表其半

長軸和半短軸。當只指明了「rx」或「ry」其中的乙個時,另乙個預設值與這個相等。

如果都不指定,則預設值為o,此時矩形的4個角為直角。如果「rx」的值大於矩形寬

度的一半,則作為一半處理。

折線多邊形

(])所有的繪圖指令都只用乙個字母來表示。

(2)座標資料和指令之間的空格可以省略,但座標緻據之間的空格顯然不能省略。

(3)問一行中出現問一條命令多次連續重複使用的情況時,命令名可以只使用第乙個,

後面的省略,不過用於資料分網的空格同樣不能少。

(4)命令名是大寫字母時代表後面所跟的資料值是絕對座標,小寫字母代表相對座標。

(5)當繪製水平或垂直線段時,可以使用h和v命令代替l。使用h或h時,後面只需要

加乙個代表x座標的引數,y座標映省與當前點相同。同樣,使用v或v時,後面也只需

要加乙個代表y座標的引數。如果這兩個命令字母後面跟了多個數值,則每乙個數值被

認為是一次單獨的繪製線條的命令,而不像l和1命令那樣把每兩個數值結合起來作為

乙個點的一對座標值來加以處理。

(6)一對座標值的xy座標之間可以用空格或逗號隔開,但座標對與座標對之間只能

用空格作為分隔符。

(7)路徑閉合命令雖然也有z和z:兩種形式,可效果是一樣的,使用時沒有區別。

本命令不帶引數,功能也比較簡單,直接從當前點繪製一條直線到本條子路徑的起點。

(8)s和s命令是繪製「光滑」三次貝塞爾曲線的命令。一條複雜的曲線由多個曲線弧段

所構成,弧段與弧段之間要光滑銜接,各個弧段的控制點必須滿足一定條件。首先,這一

段曲線弧的起點必須是前一段曲線弧的終點,否則連不上;其次,這一段曲線弧的第一控

制點必須與前一段曲線弧的第二控制點呈對稱關係,對稱中心是這段曲線弧的起點,只有

這樣才能保證曲線銜接處的光滑。s和s命令的語法是「s x2 y2 destx desty」,省略了光滑

曲線弧所隱含的第乙個控制點的座標。命令執行完後,當前點座標同樣停留在最後繪製的

一段曲線弧的終點上。

橢圓弧曲線命令用a或a來表示。其語法比較複雜,是"a rx ry x-axis-rotation large-arc-flag

sweep-flag x y" "x-axis-rotation"是此段弧所在的橢圓的x軸與水平方向的夾角,也即x軸的

旋轉角度;large-arc-flag、sweep-flag決定了橢圓弧的繪製方向,值是0或1;(x,y)是橢圓弧

終點座標。至於圓心座標則是自動計算出來的。

viewbox屬性 not viewbox 預設單位度量

transform屬性 ="translate|rotate|skewx|skewy|scale|matrix(a b c d e f)"

preserveaspectratio屬性

從屬於

引用中的

注意巢狀的對

後面的走向有疊加作用

fill-rule屬性 fill-rule="nonezero|evenodd"

fill-opacity屬性 fill-opacity="1|0~1"

stroke-opacity 屬性

stroke-linecap=butt|round|square

stroke-linejoin=miter|round|bevel|

stroke-dasharray="length spacing"

stroke-dashoffset="0|" 表示描邊時使用描邊模板(如線型、漸變色彩等)的起始偏移量,

預設值是0,即從頭開始。

marker-start:url(#) marker-mid:url(#) marker-end:url(#)

color-interpolation="auto|srgb|linearrgb"

color-rendering="auto|optimizespeed|optimizequality"

shape-rendering="auto|optimizespeed|crispedges|geometricprecision"

text-rendering="auto|optimizespeed|optimizelegibility|geometricprecision"

image-rendering="auto|optimizespeed|optimizequality"

<?xml-stylesheet href=".css" type="text/css"?>

事實證明預設時即gradientunits="objectboundingbox"時x 1 y1 等屬性不起作用

cx cy是形狀圓心 fx fy是色彩中心

" stop-color="" stop-opacity="" >

overflow="visible|hidden|scroll|auto"

clip="rect(x1 y1 x2 y2)|auto"

還可以使用文字作為剪裁路徑,此時的「c加·mle」

引數大多數情況都應該設定為「evenodd」,因為文字的輪廓通常都是交叉的。

opacity= 具有繼承性和迭加性

SVG元素設計

svgmaker是一款用來對html5網頁,移動應用程式,動畫設計和常規圖形等使用情況設計svg內容的mac軟體。svgmaker能夠vg多段路徑編輯,並將元素可以通過拖放操作在結構中匯入和重新排序,提高大家進行svg設計的工作效率,需要的朋友不要錯過哦。svg是一種標記語言,用於描述二維圖形應用程...

SVG 屬性(各種)

1 transform 參考 svg之transform 前端學習筆記 segmentfault 思否.html 1.1 transform translate x value,y value 1.2 transform scale x value,y value 1.3 transform rot...

SVG系列 動畫元素

標籤屬性詳解 參考mdn 位於形狀標籤內部,用來定義此形狀在某一時間點發生的某種變化。在持續時間裡,由開始值過度到結束值。1.屬性 attributename定義需要改變的屬性名 attributetype指定目標屬性和它相對應的值處於哪個命名空間裡 值 css xml auto from to d...