SVG主要元素和属性
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)坐标数据和指令之间的空格可以省略，但坐标致据之间的空格显然不能省略。
(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属性
<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”
参数大多数情况都应该设置为“evenodd”，因为文字的轮廓通常都是交叉的。
<mask id maskUnits="objectBoundingBox|userSpaceOnUse" x= y= width height mask="url()">
opacity= 具有继承性和迭加性