SVG
主要元素和屬性
?
１．
<desc></desc>?
和
?<!--
內(nèi)容
-->
注釋，畫圖時(shí)忽略處理該部分
２．
<defs></defs>?
預(yù)定義
待引用
?<element id="name">?
引用屬性：
url(#name)
?
<use xlink:href></use>???
引用元素
?
<symbol>?
模版
?
<image width height> width height
不能省
?
屬性
xml:space="default|preserve"
英文空格
?
屬性
externalResourceRequired="false|true"?
必需外部資源與否
?
若為
true
找不到外部資源
?
不支持
?
<switch><>
選擇
平臺(tái)
?
<rect x y width height rx ry>?rx ry
橢圓半徑
???
圓角矩形的圓角過渡部分是一段四分之一的橢圓弧，
?
分別代表其半
長軸和半短軸。當(dāng)只指明了“
rx
”或“
ry
”其中的一個(gè)時(shí)，另一個(gè)缺省值與這個(gè)相等。如果都不指定，則缺省值為
o
，此時(shí)
矩形的
4
個(gè)角為直角。如果“
rx
”的值大于矩形寬度的一半，則作為一半處理。
?
<circle cx cy r >
?
<ellipse cx cy rx ry>
?
<line x1 y1 x2 y2>
?
<polyline points="x0,y0 x1,y1?......">
折線
?
<polygon points="x0,y0 x1,y1?......">
多邊形
?
<path d="M|L|C|S|Q|T|A|Z" length=>
??? (])
所有的繪圖指令都只用一個(gè)字母來表示。
??? (2)
坐標(biāo)數(shù)據(jù)和指令之間的空格可以省略，但坐標(biāo)致?lián)g的空格顯然不能省略。
??? (3)
問一行中出現(xiàn)問一條命令多次連續(xù)重復(fù)使用的情況時(shí)，命令名可以只使用第一個(gè)，
后面的省略，不過用于數(shù)據(jù)分網(wǎng)的空格同樣不能少。
??? (4)
命令名是大寫字母時(shí)代表后面所跟的數(shù)據(jù)值是絕對(duì)坐標(biāo)，小寫字母代表相對(duì)坐標(biāo)。
??? (5)
當(dāng)繪制水平或垂直線段時(shí)，可以使用
H
和
V
命令代替
L
。使用
H
或
h
時(shí)，后面只需要加一個(gè)代表
x
坐標(biāo)的參數(shù)，
Y
坐標(biāo)映省與當(dāng)前點(diǎn)相同。同樣，使用
v
或
v
時(shí)，后面也只需要加一個(gè)代表
Y
坐標(biāo)的參數(shù)。如果這兩個(gè)命令字母后面跟了多個(gè)數(shù)值
,
則每一個(gè)數(shù)值被認(rèn)為是一次單獨(dú)的繪制線條的命令，而不像
L
和
1
命令那樣把每兩個(gè)數(shù)值結(jié)合起來作為一個(gè)點(diǎn)的一對(duì)坐標(biāo)值來加以處理。
??? (6)
一對(duì)坐標(biāo)值的
XY
坐標(biāo)之間可以用空格或逗號(hào)隔開，但坐標(biāo)對(duì)與坐標(biāo)對(duì)之間只能
用空格作為分隔符。
??? (7)
路徑閉合命令雖然也有
Z
和
z
：兩種形式，可效果是一樣的，使用時(shí)沒有區(qū)別。本命令不帶參數(shù)，功能也比較簡單，直接從當(dāng)前點(diǎn)繪制一條直線到本條子路徑的起點(diǎn)。
??? (8)s
和
s
命令是繪制“光滑”三次貝塞爾曲線的命令。一條復(fù)雜的曲線由多個(gè)曲線弧段
所構(gòu)成，弧段與弧段之間要光滑銜接，各個(gè)弧段的控制點(diǎn)必須滿足一定條件。首先，這一
段曲線弧的起點(diǎn)必須是前一段曲線弧的終點(diǎn)，否則連不上；其次，這一段曲線弧的第一控
制點(diǎn)必須與前一段曲線弧的第二控制點(diǎn)呈對(duì)稱關(guān)系，對(duì)稱中心是這段曲線弧的起點(diǎn)，只有
這樣才能保證曲線銜接處的光滑。
S
和
s
命令的語法是“
S X2 y2 destx desty
”，省略了光滑曲線弧所隱含的第一個(gè)控制點(diǎn)
的坐標(biāo)。命令執(zhí)行完后，當(dāng)前點(diǎn)坐標(biāo)同樣停留在最后繪制的一段曲線弧的終點(diǎn)上。
?
橢圓弧曲線命令用
A
或
a
來表示。其語法比較復(fù)雜，是
"A rx ry x-axis-rotation large-arc-flag sweep-flag x y"?"x-axis-rotation"
是此段弧所在的橢圓的
X
軸與水平方向的夾角，也即
x
軸的旋轉(zhuǎn)角度
;large-arc-flag
、
sweep-flag
決定了橢圓弧的繪制方向，值是
0
或
1
；
(x
，
y)
是橢圓弧終點(diǎn)坐標(biāo)。至于圓心坐標(biāo)則是自動(dòng)計(jì)算出來的。
?
viewBox
屬性
not viewbox?
缺省單位度量
?
transform
屬性
="translate|rotate|skewX|skewY|scale|matrix(a b c d e f)"
?
preserveAspectRatio
屬性
?
<text x y textLength lengthAdjust>
?
<tspan x y dx dy rotate>
從屬于
<text>
<svg>
?<text style="fill:#000000;font-family:Arial;font-weight:bold;font-size:40;">
??? <tspan x="50" y="60,70,80,80,75,60,80,70">COMMUNICATION</tspan>
??? <tspan x="50" y="150" dx="0,15" dy="10,10,10,-10,-10,-10,10,10,-10">COMMUNICATION</tspan>
??? <tspan x="50" y="230" rotate="10,20,30,40,50,60,70,80,90,90,90,90,90">COMMUNICATION</tspan>
?</text>
</svg>
?
<tref xlink:href="#">
引用
<defs>
中的
<text>
?
<glyphRun>
?
<altGlyph xlink:href="#id">
?
<altGlyphDef id="">
?
<glyphRef xlink:href= glyphRef=>
?
<textPath startOffset= method="align|stretch" spacing="exact|auto" xlink:href="">
注意嵌套的
<tspan>
對(duì)后面的走向有疊加作用
?
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|"?????
表示描邊時(shí)使用描邊模板
(
如線型、漸變色彩等
)
的起始偏移量，缺省值是
0
，即從頭開始。
?
<maker makerWidth makerHeight makerUnits refX refY orient>
?
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"
?
<a xlink:href= xlink:type="simple" xlink:show="new|replace" xlink:title xlink:actuate="onRequest" target="_top|_self">
?
<?xml-stylesheet href=".css" type="text/css"?>
?
<style type="text/css|text/xsl" media="screen|print"><!CDATA[]> </style>
?
<linearGradient id x1 y1 x2 y2 gradientUnits="objectBoundingBox|userSpaceOnUse" spreadMethod="pad|reflect|repeat" xlink:href="" gradientTransform="">?
事實(shí)證明缺省時(shí)即
gradientUnits="objectBoundingBox"
時(shí)
x 1 y1
等屬性不起作用
?
<radialGradient id cx cy r fx fy gradientUnits="objectBoundingBox|userSpaceOnUse" spreadMethod="pad|reflect|repeat"?xlink:href="" gradientTransform="">?????????? cx cy
是形狀圓心
?fx fy
是色彩中心
?
<stop offset="<length>" stop-color="" stop-opacity="" >
?
<pattern id x y width height patternUnits="objectBoundingBox|userSpaceOnUse" viewBox="" patternTransform xlink:href="" patternTransform="">
?
overflow="visible|hidden|scroll|auto"
?
clip="rect(x1 y1 x2 y2)|auto"
?
<clipPath id clipPathUnits="objectBoundingBox|userSpaceOnUse" clip-Path="url" clip-rule="nonezero|evenodd">
還可以使用文字作為剪裁路徑，此時(shí)的“
c
加·
mle
”參數(shù)大多數(shù)情況都應(yīng)該設(shè)置為“
evenodd
”，因?yàn)槲淖值妮喞ǔ６际墙徊娴摹?/span>
?
<mask id maskUnits="objectBoundingBox|userSpaceOnUse" x= y= width height mask="url()">
?
opacity=?
具有繼承性和迭加性