SVG 基础知识回顾

第一次开通博客，思前想去还是先回顾下去年做比赛作品时学习的SVG动画。下一篇写SVG制作动画总结。

SVG 是使用 XML 来描述二维图形和绘图程序的语言。

先了解下SVG的优势：可在任何的分辨率下被高质量地打印；图像中的文本是可选的，同时也是可搜索的（很适合制作地图）；可以与 Java 技术一起运行；与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强；所有浏览器均支持 SVG 文件，不过需要安装插件的 Internet Explorer 除外，但插件是免费的。

SVG 预定义的形状元素：

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

<rect> 标签

x : 矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）;

y : 矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）;

rx 和 ry : 可使矩形产生圆角;

fill-opacity: 填充颜色透明度;

stroke-opacity: 定义笔触颜色的透明度;

opacity: 属性定义整个元素的透明值

<html>
<svg width="100%" height="100%" version="1.1">
<rect x="20" y="20" rx="20" ry="20" width="250" height="100" style="fill:red;stroke:black; stroke-width:5;opacity:0.5"/>
</svg>
</html>

<circle> 标签

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

<html>
<svg width="100%" height="100%" version="1.1"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>
</html>

<ellipse> 标签

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

<html><svg width="100%" height="100%" version="1.1"> <ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/> </svg>
</html>

<line> 标签

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

<html><svg width="100%" height="100%" version="1.1"> <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/> </svg>
</html>

<polygon> 标签

　　<polygon> : 创建含有不少于三个边的图形；

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

<html><svg width="100%" height="100%" version="1.1"><polygon points="220,100 300,210 170,250 123,234" style="fill:#cccccc; stroke:#000000;stroke-width:1"/></svg>
</html>

<polyline> 标签

　　用来创建仅包含直线的形状

<html><svg width="100%" height="100%" version="1.1"><polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/></svg>
</html>

<path> 标签

　　用来定义路径

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

　　注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

定义了一条路径，它开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径。

<html>
<svg width="100%" height="100%" version="1.1"><path d="M250 150 L150 350 L350 350 Z" />
</svg>
</html>

创建了一个螺旋：

<html> <svg width="100%" height="100%" version="1.1"><path d="M153 334C153 334 151 334 151 334C151 339 153 344 156 344C164 344 171 339 171 334C171 322 164 314 156 314 C142 314 131 322 131 334 C131 350 142 364 156 364C175 364 191 350 191 334C191 311 175 294 156 294C131 294 111 311 111 334C111 361 131 384 156 384C186 384 211 361 211 334C211 300 186 274 156 274" style="fill:white;stroke:red;stroke-width:2"/></svg>
</html>

很复杂吧？是的！！！由于绘制路径的复杂性，因此还是使用 SVG 编辑器来创建复杂的图形。

转载于:https://www.cnblogs.com/Chrimisia/p/6669754.html

SVG 基础知识回顾相关推荐

Java基础知识回顾之七 ----- 总结篇
前言在之前Java基础知识回顾中,我们回顾了基础数据类型.修饰符和String.三大特性.集合.多线程和IO.本篇文章则对之前学过的知识进行总结.除了简单的复习之外,还会增加一些相应的理解. 基础数 ...
php基础知识总结大全,php基础知识回顾 —— 常量
您现在的位置是:网站首页>>PHP>>php php基础知识回顾 -- 常量发布时间:2019-01-23 17:23:08作者:wangjian浏览量:489点赞量:0 在 ...
java知识点博客园_JAVA基础知识回顾
JAVA基础知识回顾一.背景介绍 JavaSE(J2SE)(Java2 Platform Standard Edition,java平台标准版) JavaEE(J2EE)(Java 2 Platfo ...
C语言基础知识回顾 2-三种基本机构
C语言基础知识回顾 %超适用于计算机二级% 第二章三种基本结构本章回顾最基本的顺序.条件.循环语句的语法结构,对于非初学者来说,这一部分内容想必早就信手拈来. 因此,回顾的侧重点都是一些需要注意的 ...
【Java基础知识回顾篇】之打怪升级Day001
Java基础知识回顾篇之打怪升级Day001 目录 Java基础知识回顾篇之打怪升级Day001 简介一.为什么现在主流的是Java8和Java11? 二.简单尝试编写java程序 1.编写一个He ...
Java基础知识回顾之一 ----- 基本数据类型
前言在开始工作至今,学习各种各样的技术之中发现自己的很多Java的基础知识都忘了⊙﹏⊙b汗... 而且越是学习越是发现Java基础的重要性,所以准备单独抽一下时间进行Java基础的重新学习.在重新学 ...
前端开发入门：html和css基础知识回顾2
HTML+CSS基础知识 1.对WEB标准以及W3C的理解与认识标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被 ...
JavaSE基础知识回顾
文章目录 JavaSE 一.前言 1.1.解决大家的疑惑 1.2.Java和Python的抉择 1.3.走进Java 二.预科 2.1.学习准备:博客 2.2.MarkDown 2.3.基本Dos命令 ...
Java基础知识回顾之六 ----- IO流
前言在上一篇文章中,回顾了Java的多线程.而在本篇文章中主要介绍Java IO的相关知识. IO的介绍什么是IO? IO的名称又来是Input与Output的缩写,也就是输入流和输出流.输入流用 ...

SVG 基础知识回顾

SVG 基础知识回顾相关推荐

最新文章

热门文章

SVG 基础知识 回顾

SVG 基础知识 回顾相关推荐

最新文章

热门文章

SVG 基础知识回顾

SVG 基础知识回顾相关推荐