SVG精髓阅读笔记

标签: svg
75人阅读 评论(0) 收藏 举报
分类:

SVG,是一种可缩放矢量图形,一种XML应用.可以以一种简洁,可移植的形式表示图形信息.

计算机中描述图形信息的二大系统是栅格图形和矢量图形,在栅格图形系统中,图像被表示为图片元素或者像素的长方形数组,每个像素用其RGB颜色值或者颜色表内的索引表示,这一系列像素也称为位图.

在矢量图形系统中,图像被描述为一系列几何形状,矢量图形阅读器接受在指定坐标集上绘制形状的指令,而不是接受一系列已经计算好的像素.有人把矢量图形描述为一组绘图指令,而位图则是在特定的位置填充颜色的点.

矢量图形的用途:1:计算机辅助绘图,CAD,可以精确地测量和放大绘图以便查看细节非常重要,2:设计用于高分辨率打印图形的程序,

SVG的特点:可缩放,不失真,无锯齿,或锯齿不明显.

SVG文档:

<?xmlversion="1.0"?>

<!DOCTYPE svgPUBLIC "-//W3C//DTD SVG 1.1//EN"

 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svgwidth="500" height="500" version="1.1"

    xmlns="http://www.w3.org/2000/svg"

    xmlns:xlink="http://www.w3.org/1999/xlink">

</svg>

根元素svg可以用width和height二个属性定义svg的像素宽和像素高的

SVG的一些基本元素和用法,

SVG的坐标原点在左上角(0,0)

元素circel可以画圆相关图形, 指定中心点的x坐标和y坐标以及半径,如<circle cx=”10” cy=”10” r=”50” style=”stroke:black;fill:none”/>可以作为单独属性写出来如: <circle cx=”10” cy=”10” r=”50” stroke=”black”fill=”none”/>

<line/> 用于划线  x1 y1 x2 y2

<g></g>分组 指定一个id 以便后续复用

<use/> 变换复制组

<polyline/> 折线

<text></text>文本元素

<rect/> 矩形

在网页中使用SVG

SVG作为图像,作为图像,作为CSS背景,作为对象,内联SVG

 

SVG的坐标系统

视口,文档使用的画布区域称为视口,单位可以em,默认字体大小,ex 字母x的高度,px像素,pt点pc12点cm厘米,mm毫米,in英寸可混用,没有单位默认为像素

默认坐标是水平坐标向右递增,垂直坐标垂直向下递增

元素svg上的属性viewBox属性,有四个值,分表代表想要叠加在视口上的用户坐标系统的最小x坐标,最小y坐标,宽度和高度

下面一行代码是在4厘米*5厘米的图纸上,设置每厘米16个单位的坐标系统

<svg width=”4cm”height=”5cm” viewBox=”0 0 64 80”></svg>

属性viewBox的宽高比可以不同于视口的宽高比,在这种情况下SVG可以做三件事

1:按较小的尺寸等比例缩放图形,以使图形完全填充视口,

2:按较大的尺寸等比例缩放图形并裁剪掉超出视口的部分

3:拉伸和挤压绘图以使其恰好填充新的视口

属相preserveAspectRatio允许我们指定被缩放的图形相对于视口的对齐方式,以及是希望它适配边缘还是要裁剪,

PreserveAspectRatio=”alignment[meet | slice]”

其中alignment指定轴和位置, x,y Min Mid Max

Meet参数适配viewBox视口

参数slice会裁剪图形不适合视口的部分,

如果使用none参数,图像不会被等比例缩放,以使它的用户坐标适合视口.

Svg支持嵌套的坐标系统将一个svg元素插入到一个新的文档中

 

Svg中的基本形状

线段<line x1=”” y1=”” x2=”” y2=””/>

笔画特性:stroke-width

笔画颜色stroke

线条透明度stroke-opacity

虚线:stroke-dasharray

矩形<rect x=”” y=”” width=”” height=””/>

圆角矩形加上属性rx 与ry

椭圆<ellipse cx=”” cy=”” rx=”” ry=””/>

多边形<polygon points=””/> 可以用来画任意封闭图形,不需要指定终点,自动闭合

属性fill-rule规定填充的规则,二个值为nonzero 默认和evenodd

折线<polyline/> 不会自动闭合

当使用<line> 和<polyline>划线时,可以为stroke-linecap指定不同的值来确定线的头尾形状,可能的取值为butt,round,square

属性stroke-linejoin用来指定线段在图形棱角处交叉时的效果,可能的取值有,miter 尖,round圆,bevel平

 

文档结构:

Svg提倡表现与结构分离,

我们有四种方式指定图像的表现信息分别是,内联样式,内部样式表,外部样式表,以及表现属性

内联样式

<circle  style=”stoke:black;fill:none”>

内部样式表

<svg>

<defs>

<style  type=”text/css”>

<![CDATA[[

circle{

fill:#ffc;

stoke:blue

}

]]>

</style>

</defs>

</svg>

外部样式表:

<?xml-stylesheethref=”ext_style.css” type=”text/css”?>

表现属性

<circle cx=”10”cy=”10” r=”5” fill=”red” stroke=”black” stroke-width=”2”/>

表现属性位于优先级的最底部.

 

分组和引用对象

<g>元素会将其所有的子元素作为一个组合,通常组合还会有一个唯一的id作为名称,

<use>元素,可以重用元素,

如<use xlin:href=”#house” x=”70” y=”100”>

<defs>元素,可以存放想要复用的对象,

<symbol>元素也提供一种组合元素的方式,他的内容永远不会显示,它还可以指定viewBox 和preserveAspectRatio属性

元素<image>可以包含一个完整的svg或者栅格文件,


查看评论

在java中实现对FORM的打印功能

在JAVA实现对FORM的打印功能public void print(JFrame frame){  Container container=frame.getContentPane();  Prop...
  • programlover
  • programlover
  • 2001-10-07 09:48:00
  • 554

SVG精髓 第2版中文版

  • 2017年11月02日 16:30
  • 64.43MB
  • 下载

【迷你书】SVG精髓(第2版)

  • 2015年10月19日 10:10
  • 16.61MB
  • 下载

SVG精髓-笔记与实践

笔记链接:http://f5528907.wiz03.com/share/s/3RkEA70XbA2d2jbjQh1dHWIp3APUr93rFQYZ2srCaU2YDjgc 在网页中使用svg ...
  • qq_14863671
  • qq_14863671
  • 2017-12-21 18:16:05
  • 97

读《About Face 4 交互设计精髓》5

第4章 设立愿景 场景和设计需求 就是通过前面的工作来制订设计方案 基于场景的设计 基于人物模型的场景 三类场景 设计需求不是特性 设计需求不是规格说明 设计需求是战略性的 设...
  • wide288
  • wide288
  • 2016-08-13 22:10:43
  • 683

C语言编程精髓读书笔记(怎样有效地使用断言和避免自由主义编码)

从网景公司那个首席黑客口中,我终于知道了还有这本书,这本书老实说,比我看到的所有C语言书都新颖和独特,一看就知道是大牛(微软首席架构师)写的书 谭浩强之辈该学习学习了 以下是这本书我写的读书笔记,...
  • buhui912
  • buhui912
  • 2012-02-03 15:07:01
  • 864

读书笔记:交互设计精髓

 1 用户体验和交互设计师数字产品的用户体验设计包括3方面的关注,即形式、行为和内容。信息架构师关注导航和内容发现的设计,工业设计师和图形设计师关注静态外形的设计,而交互设计师关注的是交互形态的设计和...
  • myrockyang2
  • myrockyang2
  • 2011-04-09 13:29:00
  • 788

软件观念革命-交互设计精髓

    这两天看了一本好书《软件观念革命-交互设计精髓》(《about face 2.0:the essentials of interaction design》).目标导向设计是其核心概念。其中提...
  • nicolas16
  • nicolas16
  • 2007-11-07 21:57:00
  • 712

找回知之阅读笔记的方法

重装知之阅读后,它不支持同步,数据库为新的。 找回笔记的方法: 用 原知之阅读 存放笔记的文件夹中的database文件 替换 现知之阅读 中存放笔记的文件夹中的新database。重新打开软件...
  • vuscity
  • vuscity
  • 2017-09-14 17:13:02
  • 141

代码阅读和实践笔记

高级c数据类型 C指针 c程序中,指针一般用来: 构造链式数据结构 引用动态分配的数据结构 #define new(type) (type*) calloc(sizeof((type),1)...
  • laoj1228
  • laoj1228
  • 2017-01-14 22:20:50
  • 304
    个人资料
    持之以恒
    等级:
    访问量: 2506
    积分: 204
    排名: 36万+
    文章存档