SVG主要元素和属性

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属性

从属于

  
    COMMUNICATION
    COMMUNICATION
    COMMUNICATION
  

引用中的

注意嵌套的
后面的走向有叠加作用

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"

target="_top|_self">

 

spreadMethod="pad|reflect|repeat" xlink:href="" gradientTransform="">  
事实证明缺省时即gradientUnits="objectBoundingBox"时x 1 y1 等属性不起作用

spreadMethod="pad|reflect|repeat"  xlink:href="" gradientTransform="">          
 cx cy是形状圆心  fx fy是色彩中心

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

viewBox="" patternTransform xlink:href="" patternTransform="">

overflow="visible|hidden|scroll|auto"

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

clip-rule="nonezero|evenodd">还可以使用文字作为剪裁路径,此时的“c加·mle”
参数大多数情况都应该设置为“evenodd”,因为文字的轮廓通常都是交叉的。

opacity=  具有继承性和迭加性

你可能感兴趣的:(SVG主要元素和属性)