2. svg学习笔记-svg中的坐标系统和viewbox

我是通过《SVG精髓》这本书学习的svg，说实话，这本书写的不好，或者说翻译的不好，我没有看过这本书的原版，不知道原文写的怎么样，但是翻译出来的有些句子真的很拗口。以前老师给我们API文档的时候一直是英文的，我们问他为什么不给中文版的，英文版的看起来费劲，老师说原版的你们能看懂，翻译过来就看不懂了，现在是深有领会啊\(^o^)/~

废话说完，来看正事，svg的坐标系统和大多数绘图的坐标系统一样，左上角为原点，从左向右x轴递增，从上到下y轴递增。这本没什么好说的，大家都知道，但是奇葩的是<svg>元素有个属性叫viewbox就比较扯淡了，要是自己研究这个东西真还有点儿费劲，下面开始详谈~~~

看一个例子，编写如下的svg：

<svg width="200" height="200" style="border:1px solid #000000">

    <rect x="10" y="10" width="100" height="100" style="stroke:blue; fill:blue">

    </rect>

</svg>

在网页上会呈现如下效果：

解释下上面的代码，设置<svg>元素的宽和高都为200像素，在网页上就表现为这个svg图像占据网页空间的宽200px高200px，再设置样式：边框样式为1像素黑色实线，<rect>元素嵌套在<svg>元素中，表明svg中绘制一个矩形，设置rect元素的x为10，y为10，表示要绘制的矩形的左上角顶点的坐标为(10，10)，设置width为100，height为100，表示矩形的宽高都是100像素，再设置边框和填充颜色都是蓝色。

再来说一下这个viewbox属性，设置这个属性相当于给svg图像设置了一个选区，然后将这个选区填充到整个svg画布中，最后的你看到的结果就是选区中的图像放大或缩小的结果。这个属性有四个值，分别为坐标系统中的x值，y值，宽度，高度，属性值之间用空格或者是逗号合开。实际上这4个值唯一的确定了一个矩形和矩形的位置，x值和y值是矩形左上角顶点的坐标，宽和高分别是矩形的宽和高，单位为像素，这个矩形就是上述的选区。口说无凭，上实例，编写以下的代码：

<!DOCTYPE html>

<html>

<head>

    <title>svg</title>

</head>

<body>

    <svg width="300" height="300" viewbox="0 0 300 300" style="border:1px solid #000000">

        <rect x="10" y="0" width="1" height="1" style="stroke:blue; fill:blue">

        </rect>

        <rect x="10" y="10" width="1px" height="1px" style="stroke:blue; fill:blue">

        </rect>

        <rect x="10" y="20" width="1mm" height="1mm" style="stroke:blue; fill:blue">

        </rect>

        <rect x="10" y="30" width="1cm" height="1cm" style="stroke:blue; fill:blue">

        </rect>

    </svg>

    <svg width="300" height="300" style="border:1px solid #000000">

        <rect x="10" y="0" width="1" height="1" style="stroke:blue; fill:blue">

        </rect>

        <rect x="10" y="10" width="1px" height="1px" style="stroke:blue; fill:blue">

        </rect>

        <rect x="10" y="20" width="1mm" height="1mm" style="stroke:blue; fill:blue">

        </rect>

        <rect x="10" y="30" width="1cm" height="1cm" style="stroke:blue; fill:blue">

        </rect>

    </svg>

</body>

</html>

在网页中呈现如下结果：

以上代码为第一个svg设置了viewbox属性，但是结果并没有不同，这是因为我将第一个svg的viewbox属性设置为了"0 0 300 300"，这表示选区是整个svg图像，所以并没有变化，将上述代码中的第一个svg中的viewbox属性设置为"0 0 150 150"，结果如下：

很明显第一个图像中的每个矩形的长宽均是第二个图像的两倍，不信你可以把图片保存下来用ps测一下。出现这样的原因是我将第一个图像的选区设置为宽高均为150像素，左上角顶点为坐标原点的矩形，此矩形正好是图像的二分之一，经放大后填充在300×300的图像中，所以图像放大了二倍。再将上述代码中的第一个svg中的viewbox属性设置为"0 0 100 100"，结果如下：

如你所料，第一个图像中的每个矩形的长宽均是第二个图像的三倍，好了，吹牛完毕O(∩_∩)O哈哈~

2. svg学习笔记-svg中的坐标系统和viewbox的更多相关文章

SVG 学习<六> SVG的transform
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
SVG 学习<五> SVG动画
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
ArcGIS案例学习笔记-点集中最近点对和最远点对
ArcGIS案例学习笔记-点集中最近点对和最远点对联系方式:谢老师,135-4855-4328,xiexiaokui@qq.com 目的:对于点图层,查找最近的点对和最远的点对数据: 方法: 1. ...
《Cocos2d-x游戏开发实战精解》学习笔记3--在Cocos2d-x中播放声音
<Cocos2d-x游戏开发实战精解>学习笔记1--在Cocos2d中显示图像 <Cocos2d-x游戏开发实战精解>学习笔记2--在Cocos2d-x中显示一行文字之前的内 ...
4. svg学习笔记-文档结构元素和样式的使用
svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等 <g>元素如果我们仅 ...
SVG中的坐标系统和坐标变换
视野和世界 2D绘图中很多人会有一个误区,就是我绘图的区域是一个矩形区域.无论新建一个画布还是创建了一个容器,心里都想象里面有一个矩形区域.其实,在SVG当中,矩形区域只是视野,是我们看到的部分.实际 ...
3. svg学习笔记-基本形状和画笔属性
svg中可以绘制的基本图形有线段,矩形,多边形,圆,椭圆,分别来看一下这些基本图形: 线段使用<line>元素创建一条线段,格式如下: <line x1=" start- ...

随机推荐

Java——构造方法和匿名对象
前言在编写程序时不安全的初始化会导致程序发生发生重大错误.为了使程序可以被安全地初始化,C++引入了构造器(也可以成为构造方法)的概念,这是一个在创建对象时被自动调用的特殊方法.Java中也采用了构 ...
数据可视化 seaborn绘图(1)
seaborn是基于matplotlib的数据可视化库.提供更高层的抽象接口.绘图效果也更好. 用seaborn探索数据分布绘制单变量分布绘制二变量分布成对的数据关系可视化绘制单变量分布 se ...
MVC学习之路（1） EF 增删查改合集
首先再Model中创建一个类[WMBlogDB] public class WMBlogDB : DbContext { //连接字符串. public WMBlogDB() : base(" ...
.net DBHelper
DBHelper.cs是程序来连接数据的,也是一个程序必不可少的一个类(本人道行浅,目前这样认为).由于一个程序基本写一次,容易忘记.所有写在这里备注首先是引用 using System.Data; ...
第一册:lesson sixty nine.
原文: The car race. There is a car race near our town every year. In 1995 ,there was a very big race. ...
Python学习总结（一）—— 十分钟入门
一.Python概要 1.1.语言简介 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言,具有20多年的发展历史,成熟且稳定. 用任何编程语言来开发程序,都是为了让计算机干活,比如下 ...
CentOS 7.0 上安装和配置 VNC 服务器
作为一个系统管理员,大多数时间是通过网络管理服务器的.在管理服务器的过程中很少会用到图形界面,多数情况下我们只是用 SSH 来完成我们的管理任务.在这篇文章里,我们将配置 VNC 来提供一个连接我们 ...
vb.net 数字大写
Private Function RMBChinese(ByVal Rmb As Double) As String Dim Rmbexp As String Dim Rmbda As String ...
[Linux] Nginx 提供静态内容和优化积压队列
1.try_files指令可用于检查指定的文件或目录是否存在; NGINX会进行内部重定向,如果没有,则返回指定的状态代码.例如,要检查对应于请求URI的文件是否存在,请使用try_files指令和$ ...
使用Mybatis Generator插件自动生成映射文件(cmd无法进入文件，dns服务器对区域没有权威等问题)遇到问题
使用Mybatis Genertor插件自动生MyBatis所需要的DAO接口,实体模型类,Mapping映射文件,将生成的代码赋值到项目工程中即可. 有命令行,Eclipse插 ...

2. svg学习笔记-svg中的坐标系统和viewbox

2. svg学习笔记-svg中的坐标系统和viewbox的更多相关文章

随机推荐

热门专题