SVG
主要元素和屬性
?
１．
<desc></desc>?
和
?<!--
內容
-->
注釋，畫圖時忽略處理該部分
２．
<defs></defs>?
預定義
待引用
?<element id="name">?
引用屬性：
url(#name)
?
<use xlink:href></use>???
引用元素
?
<symbol>?
模版
?
<image width height> width height
不能省
?
屬性
xml:space="default|preserve"
英文空格
?
屬性
externalResourceRequired="false|true"?
必需外部資源與否
?
若為
true
找不到外部資源
?
不支持
?
<switch><>
選擇
平臺
?
<rect x y width height rx ry>?rx ry
橢圓半徑
???
圓角矩形的圓角過渡部分是一段四分之一的橢圓弧，
?
分別代表其半
長軸和半短軸。當只指明了“
rx
”或“
ry
”其中的一個時，另一個缺省值與這個相等。如果都不指定，則缺省值為
o
，此時
矩形的
4
個角為直角。如果“
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=>
??? (])
所有的繪圖指令都只用一個字母來表示。
??? (2)
坐標數(shù)據(jù)和指令之間的空格可以省略，但坐標致?lián)g的空格顯然不能省略。
??? (3)
問一行中出現(xiàn)問一條命令多次連續(xù)重復使用的情況時，命令名可以只使用第一個，
后面的省略，不過用于數(shù)據(jù)分網(wǎng)的空格同樣不能少。
??? (4)
命令名是大寫字母時代表后面所跟的數(shù)據(jù)值是絕對坐標，小寫字母代表相對坐標。
??? (5)
當繪制水平或垂直線段時，可以使用
H
和
V
命令代替
L
。使用
H
或
h
時，后面只需要加一個代表
x
坐標的參數(shù)，
Y
坐標映省與當前點相同。同樣，使用
v
或
v
時，后面也只需要加一個代表
Y
坐標的參數(shù)。如果這兩個命令字母后面跟了多個數(shù)值
,
則每一個數(shù)值被認為是一次單獨的繪制線條的命令，而不像
L
和
1
命令那樣把每兩個數(shù)值結合起來作為一個點的一對坐標值來加以處理。
??? (6)
一對坐標值的
XY
坐標之間可以用空格或逗號隔開，但坐標對與坐標對之間只能
用空格作為分隔符。
??? (7)
路徑閉合命令雖然也有
Z
和
z
：兩種形式，可效果是一樣的，使用時沒有區(qū)別。本命令不帶參數(shù)，功能也比較簡單，直接從當前點繪制一條直線到本條子路徑的起點。
??? (8)s
和
s
命令是繪制“光滑”三次貝塞爾曲線的命令。一條復雜的曲線由多個曲線弧段
所構成，弧段與弧段之間要光滑銜接，各個弧段的控制點必須滿足一定條件。首先，這一
段曲線弧的起點必須是前一段曲線弧的終點，否則連不上；其次，這一段曲線弧的第一控
制點必須與前一段曲線弧的第二控制點呈對稱關系，對稱中心是這段曲線弧的起點，只有
這樣才能保證曲線銜接處的光滑。
S
和
s
命令的語法是“
S X2 y2 destx desty
”，省略了光滑曲線弧所隱含的第一個控制點
的坐標。命令執(zhí)行完后，當前點坐標同樣停留在最后繪制的一段曲線弧的終點上。
?
橢圓弧曲線命令用
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
屬性
?
<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>
對后面的走向有疊加作用
?
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
，即從頭開始。
?
<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="">?
事實證明缺省時即
gradientUnits="objectBoundingBox"
時
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">
還可以使用文字作為剪裁路徑，此時的“
c
加·
mle
”參數(shù)大多數(shù)情況都應該設置為“
evenodd
”，因為文字的輪廓通常都是交叉的。
?
<mask id maskUnits="objectBoundingBox|userSpaceOnUse" x= y= width height mask="url()">
?
opacity=?
具有繼承性和迭加性