Web笔记-html中svg的基本使用

程序运行截图如下：

代码如下：

<!DOCTYPE html>
<html>
<head>
</head><body><svg width="200" height="200"><rect x="0" y="0" width="100" height="100" fill="red"></rect><line x1="100" y1="0" x2="200" y2="100" stroke="green" stroke-width="1"></line><polygon points="0,100 0,200 100,200" fill="red"></polygon><circle cx="150" cy="150" r="50" stroke-width="1" stroke="green" fill="red"></circle></svg>
</body></html>

svg是矢量绘图，和canvas一样是一个标签。

浏览器中只有Dom元素才能被选中。

svg是通过svg标签来绘图。

canvas通过JavaScript API来绘图。

canvas绘制的图是不能被选中的。

svg是可以被选中的，每一个元素都是个dom。

Svg不管放多大，都可以保持在可升缩的范围内。而canvas放大就锯齿了（可以对其进行抗锯齿）。

Canvas适合做动画。

Svg适合做展示相关的。

Web笔记-html中svg的基本使用相关推荐

python web笔记
python web笔记目的:开发一个平台(网站)~ 前端开发:HTML.CSS.JavaScript~ Web框架:接收请求并处理~ Mysql数据库:存储数据的地方快速上手:基于Flask We ...
[.NET] 《Effective C#》快速笔记 - C# 中的动态编程
<Effective C#>快速笔记 - C# 中的动态编程静态类型和动态类型各有所长,静态类型能够让编译器帮你找出更多的错误,因为编译器能够在编译时进行大部分的检查工作.C# 是一种静 ...
[IE]微软发布IE9预览版- 建议Web开发者开始研究SVG
今天的MIX 2010 会议上,IE9 发布平台预览版(IE9 Platform Preview) , 官方下载: http://ie.microsoft.com/testdrive/ (下载链接在 ...
[Web Chart系列之一(续)]Web端图形绘制SVG,VML, HTML5 Canvas 简单实例
前言本篇是继 [Web Chart系列之一]Web端图形绘制SVG,VML, HTML5 Canvas 技术比较的补充和实例说明各种技术的使用方式. VML 的用法和实例引入命名空间之后,就可以 ...
html中svg是什么文件,svg是什么文件格式？如何打开svg文件？
svg是一种开放标准的矢量图形语言,是可缩放的矢量图形格式.svg格式的图像可任意放大图形显示,而且边缘异常清晰,生成的文件很小,方便传输,文字在svg图像中保留可编辑和可搜寻的状态,没有字体的限制, ...
WEB网页设计中的DIV+CSS入门(转自：中国站长在线网)
CSS是Cascading Style Sheets(层叠样式表)的缩写.是一种对web文档添加样式的简单机制,属于表现层的布局语言. 一.基本语法规范分析一个典型CSS的语句: p {COLOR: ...
【Web API系列教程】1.2 — Web API 2中的Action Results
前言本节的主题是ASP.NET Web API怎样将控制器动作的返回值转换成HTTP的响应消息. Web API控制器动作能够返回下列的不论什么值: 1. void 2. HttpResponseM ...
Web.XML文件中关于代码提示的一些问题
1. 问题描述在进行ssm的整合时,我发现在web.xml文件中里按了alt+/以后没有下面的提示: 这样真的很不爽...于是弄了半天(主要是等着)终于解决了,特此写篇博客记录下. 2. 解决方 ...
在web.xml文件中配置Servlet时，主要配置哪些信息?
web前端的学习内容是比较多的,其中有一部分就是关于在web.xml文件中配置Servlet时的相关内容,在web.xml文件中配置Servlet时,主要配置哪些信息?来看看下面的详细介绍. 使用ID ...

Web笔记-html中svg的基本使用

Web笔记-html中svg的基本使用相关推荐

最新文章

热门文章