• 售前

  • 售后

热门帖子
入门百科

深入浅析HTML5中的SVG

[复制链接]
心醉的斜阳呈 显示全部楼层 发表于 2021-10-26 13:27:17 |阅读模式 打印 上一主题 下一主题
SVG 配景
SVG是Scalable Vector Graphics的缩写,意为可缩放矢量图形。1998年,万维网同盟建立了一个工作组,研发一种通过XML来体现矢量图形的技能——SVG!由于SVG也是一种XML文件,以是SVG也继承了XML的开放性、可移植性和交互性的长处。如今险些所有主流的浏览器都支持SVG,各人可以从 这里 得到更多的兼容信息,其中包罗:
使用<embed>大概<object>元向来显示根本的SVG图形;
使用<img>来显示SVG图形;
将SVG图形应用为CSS配景图;
直接在HTML文档中使用<svg>标签(必要HTML5支持);
对使用CSS大概外部对象元素的HTML元素使用SVG变更、滤镜等特效;
对SVG对象使用类似photoshop的效果,包罗模糊和色彩处置惩罚;
对SVG图像使用动画;
使用SVG格式的字体;
* SVG
* 根本内容
* SVG并不属于HTML5专有内容
* HTML5提供有关SVG原生的内容
* 在HTML5出现之前,就有SVG内容
* SVG,简朴来说就是矢量图
* SVG文件的扩展名为".svg"
* SVG使用的是XML语法
* 概念
* SVG是一种使用XML技能形貌二维图形的语言
* SVG的特点
* SVG绘制图形可以被搜索引擎抓取
* SVG在图片质量不下降的情况下,被放大
* SVG与Canvas的区别
* SVG
* 不依赖分辨率
* 支持变乱绑定
* 大型渲染区域的程序(例如百度舆图)
* 不能用来实现网页游戏
* Canvas
* 依赖分辨率
* 不支持变乱绑定
* 最合适网页游戏
* 生存为".jpg"格式的图片
* 用途
* 网页中一些小的图标
* 网页中动态特效(动画效果)
* HTML5中使用SVG
* 使用<svg></svg>元素
* 作用 - 类似于<canvas>元素
* 默认大小为300px*150px
* 使用CSS样式
* 使用SVG绘制图形,必须界说<svg>元素中
* 绘制图形
* 矩形元素

复制代码代码如下:
<rect x="" y="" width="" height="" />
<!DOCTYPE html>
<html>
<head>
  <title>SVG绘制矩形</title>
  <meta charset="utf-8" />
</head>
<body>
  <!--
    在HTML页面中使用svg标签的话
    * 界说<svg></svg>元素
      * 类似于<canvas>元素的作用
      * 默认大小 300px * 150px
      * 设置宽度和高度 - 属性和style
    * 使用svg绘制所有图形,必须界说在<svg>元素内
      * 使用svg绘制的图形是与HTML页面有关的
  -->
  <svg style="background:pink;width:400px;height:400px;">
    <!--
        绘制矩形 - <rect />
        * x和y - 绘制矩形的左上角坐标值
        * width和height - 绘制矩形的宽度和高度
          * 必须使用属性方式,不能使用style样式方式
        * 默认颜色为玄色
        设置颜色 - 既可以使用属性,还可以使用样式
        * fill - 设置添补颜色
        * stroke - 设置描边颜色
        设置线条宽度
        * stroke-width
        注意
        * svg绘制的图形,使用style方式设置样式,使用的不是CSS属性,而是SVG属性
    -->
    <rect x="10" y="10" width="100" height="100" fill="blue" stroke="black" stroke-width="5" />
    <rect x="120" y="10" width="100" height="100" style="fill:blue;stroke:black;stroke-width:5" />
  </svg>
</body>
</html>
* 圆形元素
<circle cx="" cy="" r="" />
<body>
  <svg width="500px" height="500px">
    <!--
        绘制圆形 - <circle>
        * cx和cy - 圆形的圆形坐标值
        * r - 圆形的半径
    -->
    <circle cx="100" cy="100" r="100" fill="pink" />
  </svg>
</body>
* 椭圆元素
<ellipse cx="" cy="" rx="" ry="">
<body>
  <svg width="300px" height="300px">
    <ellipse cx="150" cy="150" rx="150" ry="100" />
  </svg>
</body>
* 直线元素
<line x1="" y1="" x2="" y2="" />
<body>
  <!--
    <svg>元素中只能包罗一个图形元素,照旧可以包罗多个图形元素?
    * 可以包罗多个图形元素
  -->
  <svg width="300px" height="300px">
    <line x1="10" y1="10" x2="200" y2="200" stroke-width="10" stroke="black"/>
    <line x1="200" y1="200" x2="200" y2="10" stroke-width="10" stroke="black"/>
  </svg>
</body>
* 折线元素
<polyline points="">
<body>
  <svg width="500px" height="500px">
    <!--
        <polyline>元素 - 折线
        * points - 设置起点、折点及尽头
          * x和y之间使用","分隔
          * 多个点之间使用空格分隔
        折线的特点
        * 默认将折线中的区域(起点到尽头),默认提供玄色
    -->
    <polyline points="10,10 200,10 200,200 10,200 10,10" stroke-width="5" stroke="black" fill="white"/>
  </svg>
</body>
* 多边形元素
<polygon points="" />
<body>
  <svg width="500px" height="500px">
    <polyline points="10,10 200,10 200,200 10,200 100,100 10,10" stroke-width="5" stroke="black" fill="white"/>
  </svg>
</body>
* 特效元素
* 渐变 - 渐变元素界说在<defs>元素内
* 线型渐变 - <linearGradient>
* 该元素是起始元素
<linearGradient x1="%" y1="%" x2="%" y2="%">
<stop offset="%" stop-color="color" />
</linearGradient>
<body>
  <svg width="400px" height="400px">
    <!--
        设置线型渐变 - <linearGradient>
        * 用法 - 将渐变界说在<defs>元素中
        * 特点 - 具有基准线
          * 起点坐标值 - x1和y1
          * 尽头坐标值 - x2和y2
        * 注意
          * 该元素是起始元素
            <linearGradient></linearGradient>
          * x1和y1、x2和y2的值都是百分值
        * 界说id属性
          * 用于将设置的渐变添加到绘制的图形元素中
        * 使用<stop>元素 - 设置渐变的颜色
          * offset - 设置渐变颜色的位置
            * 该值也是百分值
          * stop-color - 设置渐变颜色
          * stop-opacity - 设置渐变颜色的透明度
    -->
    <defs>
        <linearGradient id="mygrd" x1="0" y1="0" x2="100%" y2="100%">
            <stop offset="0" stop-color="red" />
            <stop offset="50%" stop-color="green" />
            <stop offset="100%" stop-color="blue" />
        </linearGradient>
    </defs>
    <!--
        怎样可以将上面设置线型渐变,添加在下面的矩形中?
        * 使用fill属性,值为url(#渐变元素的id值)
    -->
    <rect x="0" y="0" width="400" height="400" fill="url(#mygrd)" />
  </svg>
</body>

* 扇形(射线)渐变 - <radialGradient>
* 滤镜 - 高斯模糊
* 滤镜使用<filter>元素
* <feGaussianBlur>元素 - 高斯模糊
* in="SourceGraphic"
* stdDeviation - 设置模糊程度

复制代码代码如下:
<body>
  <svg width="500px" height="500px">
    <!--
        怎样设置高斯模糊滤镜
        * 界说<defs></defs>元素 - 滤镜界说在该元素中
        * 界说<filter></filter>元素 - 体现SVG的滤镜
          * 界说高斯模糊元素<feGaussianBlur>
          * 属性
            * in="SourceGraphic" - 固定写法
            * stdDeviation - 设置模糊程度
        * 为<filter>元素界说id属性值
          * 方便添加在绘制图形的元素中
    -->
    <defs>
        <filter id="myfilter">
            <feGaussianBlur in="SourceGraphic" stdDeviation=5 />
        </filter>
    </defs>
    <!--
        怎样将上面的高斯模糊与下面的元素举行关联
        * 使用filter属性,值为url(#id)
          * 设置当前图形的滤镜
    -->
    <rect x="100" y="100" width="100" height="100" filter="url(#myfilter)" fill="green" />
  </svg>
</body>

* 注意 - 界说在<defs>元素中
* TWO.js
* 根本内容
* JS库先容
* three.js - 专门用于绘制三维图形
* two.js - 专门用于绘制二维图形
* two.js支持的格式
* SVG - 默认
* Canvas
* WebGL - 专门用于绘制图像
* 怎样使用two.js
* 在HTML页面中引入two.js文件
* 在HTML页面中界说容器(<div>)
* 在javascript代码中
* 获取HTML页面中的容器
* 创建Two对象,将该对象添加到容器中
new Two(params).appendTo(Element);
* 使用two.js提供的API方法举行绘制
* 使用two.js提供的方法,设置图形
* 使用update()方法举行绘制
* 创建Two对象
* 构造器 - new Two(params)
* params参数 - 设置当前对象的信息
* type - 设置当前使用的格式(Two.Types.svg)
* svg - 默认值
* canvas
* webgl
* width和height - 设置宽度和高度
* fullscreen - 设置是否全屏
* Boolean值,true体现全屏
* 图形方法
* makeLine() - 绘制线条
* makeRectangle() - 绘制矩形
* makeCircle() - 绘制圆形
* makeEllipse() - 绘制椭圆
* 动画方法
* update() - 更新动画
* play() - 添加动画(循环)
* pause() - 删除动画
* 设置绘制图形的样式
* 调用Two对象的绘制方法绘制图形时,返回该图形对象
* 通过该图形对象,设置相干属性值
* 分组操纵
* Two.Group
* 动画效果
* bind(event,callback)方法 - 变乱绑定
* event - 绑定变乱名称
* update - 对应update()方法的作用
* 所有的DOM变乱都可以绑定
* callback - 变乱处置惩罚函数
* 扩展内容
* 前端开发工具
* Aptana Studio 3 - 代码提示
* Webstrom - 国内前端开发职员神器
* 实际开发中
* 多用SVG
* 不失真
* 可被搜索
* 页面优化 - 淘汰外部链接
* <a href="">
* <img src="">
* Canvas - HTML绘制图形
* 实际运行中,是以图片方式出现(.png)
* 不能被搜索引擎抓取
* 放大后失真
* SVG内容
* 内容量非常大
* 静态绘制图形
* 动态动画效果
* 专门提供变乱
* 网上关于SVG的资料很少(没有册本)
* SVG的规范(W3C英文)
* SVG或CANVAS在HTML页面中界说
* 是只能界说一个元素,照旧可以界说多个元素?
* 在一个HTML页面可以界说多个<svg>或<canvas>元素
* SVG照旧CANVAS都是答应同时界说(绘制)多个图形
* 在实际开发中的使用
* SVG在将来的工作开发,使用率并不高
* SVG图片一样平常都是由UI计划师来完成
* SVG纵然是我们本身来计划(绘制)
* 现在网络上许多专门提供现成的SVG图片的网站
* 使用JS库
------------------------------------------------------------------------------------>为了生活而改变,为了改变而创造.

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作