zoukankan      html  css  js  c++  java
  • SVG标签

     

    一、SVG中对图像标签的支持

    Attribute

    Style:

    CSS fill 属性定义填充的颜色

    CSS stroke-width 属性指定填充线宽

    CSS stroke 属性指定border颜色

    CSS fill-opacity 属性定义填充颜色的透明度(从0到1)

    CSS stroke-opacity属性定义描边颜色的透明度(从0到1)

    CSS opacity属性定义整个元素的透明度(从0到1)

    CSS filter:url(#Gaussian_Blur)属性用来给元素链接滤镜。当链接到filters的id属性时,#是必须的。

    Fill: 属性定义填充的颜色

    Stroke: 属性指定border颜色

    Stroke- 属性指定填充线宽

    矩形 <rect>

    Attribute:

    width 属性指出矩形的宽

    height 属性指出矩形的高。

    rx and ry 属性定义矩形的圆角

    x 属性定义矩形的左位置

    y 属性定义矩形距上端的位置

    圆 <circle>

    Attribute:

    cx 属性定义圆心的x坐标

    cy 属性定义圆心的y坐标

    r 属性定义圆的半径

    椭圆 <ellipse>

    Attribute:

    cx 椭圆的中心点的x坐标

    cy 椭圆的中心点的y坐标

    rx 指出椭圆的横向半径

    ry 指出椭圆的纵向半径

    直线 <line>

    x1指定起点的x坐标

    y1指定起点的y坐标

    x2指定终点的x坐标

    y2指定终点的y坐标

    折线 <polyline>

    points属性定义多点的x,y坐标

    多边形 <polygon>

    points属性定义多边形每个角的x,y坐标

    曲线路径描述和操作 <path>

    M = moveto

    L = lineto

    H = horizontal lineto

    V = vertical lineto

    C = curveto

    S = smooth curveto

    Q = quadratic Belzier curve

    T = smooth quadratic Belzier curveto

    A = elliptical Arc

    Z = closepath

    注意:上面所有的命令也可以表示成小写形式。大写字母表示绝对位置,小写字母表示相对位置。

    对于<path>、<text>元素和前述形状元素,可以利用Stroke 和Fill属性进行勾勒和填充,其中填充可以使用某种颜色,或使用<linearGradient>、<radialGradient>定义的渐变色,或是使用<pattern>定义的底纹填充模式。而对于<path>、<line>、<polyline>、<polygon>等元素,只要将其放入<marker>标记对中,即可按所定义的路径绘制箭头。

    <linearGradient>标签用来定义一个svg线性渐变,<linearGradient>标签必须嵌套在<defs>标签里, 线性渐变可以被定义为,水平,垂直,角形渐变。当y1≠y2,x1=x2时,产生水平渐变, 当x1≠x2,y1=y2时,产生垂直渐变, 当y1≠y2,x1≠x2时,产生角形渐变. <linearGradient>标签的id属性定义渐变的唯一标识名。

    <linearGradient>标签的x1,x2,y1,y2属性用来定义渐变的首尾位置.

    渐变颜色范围可以由两种或多种颜色组成。每一中颜色由一个<stop>标签描述。Offset属性用来定义渐变首尾的颜色。

    <radialGradient>标签用来定义一个svg径向渐变。radialGradient>标签必须嵌套在<defs>标签里。<radialGradient>的id属性定义了渐变的唯一标志名,cx,cy,r 属性定义外圆,fx,fy定义内圆,渐变颜色范围可以由两种或多种颜色组成。每一中颜色由一个<stop>标签描述。Offset属性用来定义渐变首尾的颜色。

    对于<path>、<text>元素和各种形状元素,也可以对其轮廓内的区域作裁剪、蒙版和合成操作。<clipPath>利用上述各种元素描述裁剪路径,<mask>标记则支持单通道、三通道、和alpha通道操作。最后,SVG还支持图形中成组的概念,以上操作均可以对一组图形进行操作。

    二、SVG中对图像过滤操作的支持

    使用标记<filter>可以定义过滤器效果,在其中按照要施加的过滤操作的顺序依次罗列相应的标记。

    feBlend

    feColorMatrix

    feComponentTransfer

    feComposite

    feConvolveMatrix

    feDiffuseLighting

    feDisplacementMap

    feFlood

    <feGaussianBlur>

    Attribute:

    stdDeviation 属性用来定义blur的值

    in="SourceGraphic" 定义本效果的输入源是整个图像

    feImage

    feMerge

    feMorphology

    feOffset

    feSpecularLighting

    feTile

    feTurbulence

    feDistantLight

    fePointLight

    feSpotLight

    一个svg滤镜必须在<defs>标签里定义。<filter>标签用来定义一个svg滤镜。<filter>标签有一个必须的id属性来唯一标识该滤镜应用到图像中。<filter>标签必须嵌套到<defs>标签里,<defs>标签是definitions的简写,允许特殊标签的定义。

    三、SVG中对动画的支持

    SVG中用标记<animateMotion>描述元素的移动效果,用<animateFlipbook>描述元素的弹跳效果,用<animateTransform>描述元素的放缩、旋转、偏斜等变换效果,用<animateColor>描述元素颜色的改变,还可以用<animate>描述元素的淡入淡出效果。

  • 相关阅读:
    网络兼职轻松赚
    微信H5支付demo
    支付宝H5支付demo
    笔记本安装SSD固态硬盘详细的优化设置
    JQuery的AJAX
    第二次面试
    存储过程的总结
    SQl数据操作和查询
    面对考试毫无畏惧的SSH
    掷骰子-IOS新手项目练习(抱歉,由于个人原因,图片没显示,要源码的项目私聊)
  • 原文地址:https://www.cnblogs.com/xgbzsc/p/2662445.html
Copyright © 2011-2022 走看看