咖啡伴侣

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=  具有继承性和迭加性