首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

使用HTML5进行SVG矢量图形绘制的入门教程_html5教程技巧

作者：手机用户2602921303_852 | 来源：互联网 | 2017-05-11 14:13
这篇文章主要介绍了使用HTML5进行SVG矢量图形绘制的入门教程,包括基本图形的绘制和简单的渐变效果等介绍,注意旧版本IE对其的支持并不好,需要的朋友可以参考下
VG 表示可伸缩矢量图形，这是一门用于描述 2D 图形的语言，图形应用使用 XML 编写，然后 XML 由 SVG 阅读器程序呈现。

SVG 主要用于矢量类型的图表，比如饼图，X，Y 坐标系统中的二维图等等。

SVG 在 2003 年 1 月 14 日成为 W3C 推荐标准，你可以在 SVG 规范 页面中查看最新版本的 SVG 规范。

查看 SVG 文件
大多数 Web 浏览器都可以显示 SVG，就像它们可以显示 PNG，GIF 以及 JPG 图形。IE 用户可能需要安装 Adobe SVG 阅读器 以便能够在浏览器中查看 SVG。

在 HTML5 中嵌入 SVG
HTML5 允许我们直接使用 __... 标签嵌入 SVG，下面是简单的语法：

XML/HTML Code复制内容到剪贴板

  1. <svg xmlns="http://www.w3.org/2000/svg">
  2. ...
  3. svg>

HTML5 - SVG 圆
下面是一个 SVG 示例的 HTML5 版本，用 标签绘制一个圆：

XML/HTML Code复制内容到剪贴板

  1. >
  2. <head>
  3. <title>SVGtitle>
  4. <meta charset="utf-8" />
  5. head>
  6. <body>
  7. <h2>HTML5 SVG Circleh2>
  8. <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
  9. <circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
  10. svg>
  11. body>
  12. html>

在启用 HTML5 的最新版 FireFox 中会生成如下结果：
2016219112130340.jpg (223×186)


HTML5 - SVG 矩形
下面是一个 SVG 示例的 HTML5 版本，用 标签绘制一个矩形：

XML/HTML Code复制内容到剪贴板

  1. >
  2. <head>
  3. <title>SVGtitle>
  4. <meta charset="utf-8" />
  5. head>
  6. <body>
  7. <h2>HTML5 SVG Rectangleh2>
  8. <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
  9. <rect id="redrect" width="300" height="100" fill="red" />
  10. svg>
  11. body>
  12. html>

在启用 HTML5 的最新版 FireFox 中会生成如下结果：
2016219112200272.jpg (316×152)


HTML5 - SVG 线条
下面是一个 SVG 示例的 HTML5 版本，用 标签绘制一个线条：

XML/HTML Code复制内容到剪贴板

  1. >
  2. <head>
  3. <title>SVGtitle>
  4. <meta charset="utf-8" />
  5. head>
  6. <body>
  7. <h2>HTML5 SVG Lineh2>
  8. <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
  9. <line x1="0" y1="0" x2="200" y2="100"
  10. style="stroke:red;stroke-width:2"/>
  11. svg>
  12. body>
  13. html>

你可以使用 style 属性给它设置额外的样式信息，比如笔画，填充色，笔画宽度等等。

在启用 HTML5 的最新版 FireFox 中会生成如下结果：
2016219112220725.jpg (217×159)


HTML5 - SVG 椭圆
下面是一个 SVG 示例的 HTML5 版本，用 标签绘制一个椭圆：

XML/HTML Code复制内容到剪贴板

  1. >
  2. <head>
  3. <title>SVGtitle>
  4. <meta charset="utf-8" />
  5. head>
  6. <body>
  7. <h2>HTML5 SVG Ellipseh2>
  8. <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
  9. <ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />
  10. svg>
  11. body>
  12. html>

在启用 HTML5 的最新版 FireFox 中会生成如下结果：
2016219112240763.jpg (225×148)


HTML5 - SVG 多边形
下面是一个 SVG 示例的 HTML5 版本，用 标签绘制一个多边形：

XML/HTML Code复制内容到剪贴板

  1. >
  2. <head>
  3. <title>SVGtitle>
  4. <meta charset="utf-8" />
  5. head>
  6. <body>
  7. <h2>HTML5 SVG Polygonh2>
  8. <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
  9. <polygon points="20,10 300,20, 170,50" fill="red" />
  10. svg>
  11. body>
  12. html>

在启用 HTML5 的最新版 FireFox 中会生成如下结果：
2016219112258796.jpg (310×118)


HTML5 - SVG 折线
下面是一个 SVG 示例的 HTML5 版本，用 标签绘制一个折线图：

XML/HTML Code复制内容到剪贴板

  1. >
  2. <head>
  3. <title>SVGtitle>
  4. <meta charset="utf-8" />
  5. head>
  6. <body>
  7. <h2>HTML5 SVG Polylineh2>
  8. <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
  9. <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" />
  10. svg>
  11. body>
  12. html>

在启用 HTML5 的最新版 FireFox 中会生成如下结果：
2016219112318049.jpg (245×114)


HTML5 - SVG 渐变
下面是一个 SVG 示例的 HTML5 版本，用 标签绘制一个椭圆，使用 标签定义一个 SVG 径向渐变。

我们可以以类似的方式用 标签创建 SVG 线性渐变。

XML/HTML Code复制内容到剪贴板

  1. >
  2. <head>
  3. <title>SVGtitle>
  4. <meta charset="utf-8" />
  5. head>
  6. <body>
  7. <h2>HTML5 SVG Gradient Ellipseh2>
  8. <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
  9. <defs>
  10. <radialGradient id="gradient" cx="50%" cy="50%" r="50%"
  11. fx="50%" fy="50%">
  12. <stop offset="0%" style="stop-color:rgb(200,200,200);
  13. stop-opacity:0"/>
  14. <stop offset="100%" style="stop-color:rgb(0,0,255);
  15. stop-opacity:1"/>
  16. radialGradient>
  17. defs>
  18. <ellipse cx="100" cy="50" rx="100" ry="50"
  19. style="fill:url(#gradient)" />
  20. svg>
  21. body>
  22. html>

在启用 HTML5 的最新版 FireFox 中会生成如下结果：
2016219112338977.jpg (319×157)

推荐阅读
  • get

    Apache Shiro 身份验证绕过漏洞 (CVE202011989) 详细解析及防范措施

    Apache Shiro 身份验证绕过漏洞 (CVE202011989) 详细解析及防范措施
    本文详细解析了Apache Shiro 身份验证绕过漏洞 (CVE202011989) 的原理和影响，并提供了相应的防范措施。Apache Shiro 是一个强大且易用的Java安全框架，常用于执行身份验证、授权、密码和会话管理。在Apache Shiro 1.5.3之前的版本中，与Spring控制器一起使用时，存在特制请求可能导致身份验证绕过的漏洞。本文还介绍了该漏洞的具体细节，并给出了防范该漏洞的建议措施。 ... [详细]
  • format

    VScode格式化文档换行或不换行的设置方法

    VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法，包括使用插件和修改settings.json文件的内容。详细步骤为：找到settings.json文件，将其中的代码替换为指定的代码。 ... [详细]
  • request

    AJAX的POST请求及实现数据修改功能的方法

    本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术，可以实现在输入某个id后，通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用，以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况，并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • hash

    数据库的存储结构及其重要性

    本文介绍了数据库的存储结构及其重要性，强调了关系数据库范例中将逻辑存储与物理存储分开的必要性。通过逻辑结构和物理结构的分离，可以实现对物理存储的重新组织和数据库的迁移，而应用程序不会察觉到任何更改。文章还展示了Oracle数据库的逻辑结构和物理结构，并介绍了表空间的概念和作用。 ... [详细]
  • range

    CSS3选择器的使用方法详解，提高Web开发效率和精准度

    CSS3选择器的使用方法详解，提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]
  • main

    Open judge C16H: Magical Balls 快速幂+逆元问题解析

    本文主要解析了Open judge C16H问题中涉及到的Magical Balls的快速幂和逆元算法，并给出了问题的解析和解决方法。详细介绍了问题的背景和规则，并给出了相应的算法解析和实现步骤。通过本文的解析，读者可以更好地理解和解决Open judge C16H问题中的Magical Balls部分。 ... [详细]
  • string

    知识图谱——机器大脑中的知识库

    知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • eval

    推荐系统遇上深度学习(十七）详解推荐系统中的常用评测指标

    推荐系统遇上深度学习(十七）详解推荐系统中的常用评测指标
    原创：石晓文小小挖掘机2018-06-18笔者是一个痴迷于挖掘数据中的价值的学习人，希望在平日的工作学习中，挖掘数据的价值， ... [详细]
  • range

    使用cacti监控mssql 2005运行资源情况的操作步骤

    本文介绍了使用cacti监控mssql 2005运行资源情况的操作步骤，包括安装必要的工具和驱动，测试mssql的连接，配置监控脚本等。通过php连接mssql来获取SQL 2005性能计算器的值，实现对mssql的监控。详细的操作步骤和代码请参考附件。 ... [详细]
  • utf-8

    iOS超签签名服务器搭建及其优劣势

    iOS超签签名服务器搭建及其优劣势
    本文介绍了搭建iOS超签签名服务器的原因和优势，包括不掉签、用户可以直接安装不需要信任、体验好等。同时也提到了超签的劣势，即一个证书只能安装100个，成本较高。文章还详细介绍了超签的实现原理，包括用户请求服务器安装mobileconfig文件、服务器调用苹果接口添加udid等步骤。最后，还提到了生成mobileconfig文件和导出AppleWorldwideDeveloperRelationsCertificationAuthority证书的方法。 ... [详细]
  • utf-8

    分享css中提升优先级属性!important的用法总结

    分享css中提升优先级属性!important的用法总结
    web前端|css教程css!importantweb前端-css教程本文分享css中提升优先级属性!important的用法总结微信门店展示源码,vscode如何管理站点,ubu ... [详细]
  • utf-8

    网页播放视频的三种实现方式

    本文介绍了网页播放视频的三种实现方式，分别是使用html5的video标签、使用flash来播放以及使用object标签。其中，推荐使用html5的video标签来简单播放视频，但有些老的浏览器不支持html5。另外，还可以使用flash来播放视频，需要使用object标签。 ... [详细]
  • main

    CSS |网格行结束属性

    CSS|网格-行-结束属性原文:https://www.gee ... [详细]
  • main

    css元素可拖动,如何使用CSS禁止元素拖拽？

    css元素可拖动,如何使用CSS禁止元素拖拽？
    一、用户行为三剑客以下3个CSS属性：user-select属性可以设置是否允许用户选择页面中的图文内容；user-modify属性可以设置是否允许输入 ... [详细]
  • utf-8

    使用python自动化下载pdf文档

    使用python输入PDF编号自动下载freepatentsonline.com的文档#!usrbinenvpython3#codingutf-8#Version:python3. ... [详细]
author-avatar
手机用户2602921303_852
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有