svg

  1. SVG 简介
    SVG 是使用 XML 来描述二维图形和绘图程序的语言。
    SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
    SVG 用来定义用于网络的基于矢量的图形
    SVG 使用 XML 格式定义图形
    SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
    SVG 是万维网联盟的标准
    SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

  2. SVG 在 HTML 页面
    或者
    在html里面直接使用


  3. 矩形
    圆形
    椭圆
    线
    折线
    多边形
    路径

  4. 矩形

    rect 元素的 width 和 height 属性可定义矩形的高度和宽度
    style 属性用来定义 CSS 属性
    CSS 的 fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值)
    CSS 的 stroke-width 属性定义矩形边框的宽度
    CSS 的 stroke 属性定义矩形边框的颜色x 属性定义矩形的左侧位置(例如,x="0" 定义矩形到浏览器窗口左侧的距离是 0px) y 属性定义矩形的顶端位置(例如,y="0" 定义矩形到浏览器窗口顶端的距离是 0px) CSS 的 fill-opacity 属性定义填充颜色透明度(合法的范围是:0 - 1) CSS 的 stroke-opacity 属性定义轮廓颜色的透明度(合法的范围是:0 - 1)opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。`
    rx 和 ry 属性可使矩形产生圆角。

  5. 圆形

    cx和cy属性定义圆点的x和y坐标。如果省略cx和cy,圆的中心会被设置为(0, 0)
    r属性定义圆的半径

  6. 椭圆

    CX属性定义的椭圆中心的x坐标
    CY属性定义的椭圆中心的y坐标
    RX属性定义的水平半径
    RY属性定义的垂直半径

  7. 直线

    x1 属性在 x 轴定义线条的开始
    y1 属性在 y 轴定义线条的开始
    x2 属性在 x 轴定义线条的结束
    y2 属性在 y 轴定义线条的结束

  8. 多边形

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

  9. 曲线
    元素是用于创建任何只有直线的形状

  10. 路径
    元素用于定义一个路径。
    M = moveto 移动到的点的x轴和y轴的坐标
    L = lineto 需要两个参数,分别是一个点的x轴和y轴坐标,L命令将会在当前位置和新位置(L前面画笔所在的点)之间画一条线段。
    H = horizontal lineto 绘制平行线
    V = vertical lineto 绘制垂直线
    C = curveto 三次贝塞尔曲线C
    S = smooth curveto
    Q = quadratic Bézier curve 二次贝塞尔曲线Q。
    T = smooth quadratic Bézier curveto
    A = elliptical Arc 弧形
    Z = closepath 从当前点画一条直线到路径的起点(闭合)

  11. 文本
    I love SVG
    I love SVG

    I love SVG

  12. Stroke 属性
    Stroke属性定义一条线,文本或元素轮廓颜色:
    stroke- width属性定义了一条线,文本或元素轮廓厚度:

  13. 滤镜

    1. 模糊效果






      所有互联网的SVG滤镜定义在元素中

    1. 阴影

    你可能感兴趣的:(svg)