SVG 笔记

作者: YU_XI | 来源:发表于2018-05-31 17:33 被阅读0次

    1. svg的基础原型

    <rect> 矩形 <cricle> 圆形 <ellipse> 椭圆 <line> 线 <polyline> 折线 <polygon>多边形 <path> 路线

    1.1 矩形的属性

    Attribute: width :宽度
    height :高度
    fill :填充色
    stroke-width 矩形边框宽度
    stroke:矩形边框颜色
    opacity :定义元素的透明度
    rx 和 ry 属性可使矩形产生圆角

    1.2圆形的属性

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

    1.3椭圆的属性

    cx 属性定义圆点的 x 坐标
    cy 属性定义圆点的 y 坐标
    rx 属性定义水平半径
    ry 属性定义垂直半径

    1.4 线条的属性

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

    1.5 多边形属性

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

    1.6 折线的属性

    跟多边形一样都是points

    1.7路径的属性

    下面的命令可用于路径数据:
    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 d="M250 150 L150 350 L350 350 Z" />
    上面的例子定义了一条路径,它开始于位置 250 150,到达位置 150 350,然后从那里开始到 350 350,最后在 250 150 关闭路径。

    1.8svg滤镜

    在 SVG 中,可用的滤镜有:
    feBlend
    feColorMatrix
    feComponentTransfer
    feComposite
    feConvolveMatrix
    feDiffuseLighting
    feDisplacementMap
    feFlood
    feGaussianBlur
    feImage
    feMerge
    feMorphology
    feOffset
    feSpecularLighting
    feTile
    feTurbulence
    feDistantLight
    fePointLight
    feSpotLight

    必须在 <defs> 标签中定义 SVG 滤镜。

    高斯模糊(Gaussian Blur)

    <filter> 标签用来定义 SVG 滤镜。<filter> 标签使用必需的 id 属性来定义向图形应用哪个滤镜?

    <filter> 标签必须嵌套在 <defs> 标签内。<defs> 标签是 definitions 的缩写,它允许对诸如滤镜等特殊元素进行定义。

    实例:
    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

    <svg width="100%" height="100%" version="1.1"
    xmlns="http://www.w3.org/2000/svg">

    <defs>
    <filter id="Gaussian_Blur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
    </filter>
    </defs>

    <ellipse cx="200" cy="150" rx="70" ry="40"
    style="fill:#ff0000;stroke:#000000;
    stroke-width:2;filter:url(#Gaussian_Blur)"/>

    </svg>

    <filter> 标签的 id 属性可为滤镜定义一个唯一的名称(同一滤镜可被文档中的多个元素使用)
    filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时,必须使用 # 字符
    滤镜效果是通过 <feGaussianBlur> 标签进行定义的。fe 后缀可用于所有的滤镜
    <feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的程度
    in="SourceGraphic" 这个部分定义了由整个图像创建效果.

    SVG 渐变

    渐变是一种从一种颜色到另一种颜色的平滑过渡。另外,可以把多个颜色的过渡应用到同一个元素上。

    在 SVG 中,有两种主要的渐变类型:

    线性渐变

    放射性渐变

    线性渐变

    <linearGradient> 可用来定义 SVG 的线性渐变。

    <linearGradient> 标签必须嵌套在 <defs> 的内部。<defs> 标签是 definitions 的缩写,它可对诸如渐变之类的特殊元素进行定义。

    线性渐变可被定义为水平、垂直或角形的渐变:

    当 y1 和 y2 相等,而 x1 和 x2 不同时,可创建水平渐变
    当 x1 和 x2 相等,而 y1 和 y2 不同时,可创建垂直渐变
    当 x1 和 x2 不同,且 y1 和 y2 不同时,可创建角形渐变

    放射性渐变

    <radialGradient> 用来定义放射性渐变。

    <radialGradient> 标签必须嵌套在 <defs> 中。<defs> 标签是 definitions 的缩写,它允许对诸如渐变等特殊元素进行定义

    相关文章

      网友评论

        本文标题:SVG 笔记

        本文链接:https://www.haomeiwen.com/subject/ufgqsftx.html