【7. svg学习笔记-图案和渐变】的更多相关文章

7. svg学习笔记-图案和渐变

之前,我们仅仅使用纯色来为图形填充颜色和绘制轮廓,除此之外,我们还可以使用图案和渐变来填充图形或者是绘制轮廓. 图案 图案的效果类似于,在网页中给一个元素指定背景图像,当背景图像的尺寸小于元素的尺寸的时候,背景图片会默认重复以填充整个元素.效果如下: 要创建一个图案,首先就需要定义一个重复用的图形对象,这个图形对象被称作tile(瓷砖),tile可以是任意的svg图形元素,包括<image>引用的外部图片文件,然后将tile放在<pattern>元素中作为子元素,建议将<pa…

8. svg学习笔记-文本

毫无疑问,文本也是svg中组成的重要部分,在svg中,用<text>元素来创建文本,文本的使用格式如下: <text x="20" y="30" style="font-family:'微软雅黑'; font-size:25px;">这是一个text元素</text> 其中的x和y属性默认情况下是第一个字符左下角的位置坐标,style中可以是CSS的文字相关属性,比如:font-family,font-size…

4. svg学习笔记-文档结构元素和样式的使用

svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等 <g>元素 如果我们仅仅用于学习svg的时候可能不太会用到<g>元素,但当我们绘制特别复杂的图形的时候<g>元素可配上大用场.<g>元素的作用就是将其子元素作为一个组合,以备将来的复用.可以通过为<g>元素添加<title>子元素来为组合添加标题,详细的描述可以放在<…

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

我是通过<SVG精髓>这本书学习的svg,说实话,这本书写的不好,或者说翻译的不好,我没有看过这本书的原版,不知道原文写的怎么样,但是翻译出来的有些句子真的很拗口.以前老师给我们API文档的时候一直是英文的,我们问他为什么不给中文版的,英文版的看起来费劲,老师说原版的你们能看懂,翻译过来就看不懂了,现在是深有领会啊\(^o^)/~ 废话说完,来看正事,svg的坐标系统和大多数绘图的坐标系统一样,左上角为原点,从左向右x轴递增,从上到下y轴递增.这本没什么好说的,大家都知道,但是奇葩的是<…

svg的基本图形与属性【小尾巴的svg学习笔记1】

因为项目有可能用到, 所以学习了一下,做此笔记,图截自慕课网,侵删. 一.基本图形 1.矩形 x,y定义矩形的左上角坐标: width,height定义矩形的长度和宽度: rx,ry定义矩形的圆角半径长度,这里注意,如果rx给值了ry没给值,ry沿用rx的值,反之同理: 2.圆形 cx与cy定义圆心的坐标: r为圆的半径长度: 3.椭圆 x,y依旧为圆心的坐标: 椭圆相较于圆使半径变为两个值,分别为:rx 横向半径和 ry 纵向半径: 4.直线 这个较为简单,x1,y1为起点坐标,x2,y2为终…

svg学习笔记（一）

SVG——可扩展适量图形,基于XML PC端:IE9+   wap端:表现良好,适合使用 基础图形: line(线段)  <line x1="25" y1="150" x2="375" y2="50" stroke="#f00"></line> polyline(折线) <polyline points="250 75,350 100,100 0" stro…

svg学习笔记（二）

SMIL animation演示代码集锦 <svg width="1400" height="1600" xmlns="http://www.w3.org/2000/svg"> <text font-family="microsoft yahei" font-size="120" y="160" x="160"> 马 <set attri…

svg学习笔记

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> html,body{margin:0px;padding:0px;height: 100%;} #my-svg{ position:relative; heig…

[html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形

在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中,左上方的点,为坐标轴原点(0,0). 1.绘制渐变图形 <!DOCTYPE html> <html> <head> <title></title> <script> function draw(id){ var canvas = doc…

9. svg学习笔记-裁剪和蒙版

裁剪 在svg中进行剪切,对整个svg元素而言,可以使用<svg>元素的viewbox属性,对于单个元素则可以使用<clipPath>元素.在单个图形元素上使用裁剪,可以在<defs>元素中声明一个<clipPath>元素,在<clipPath>元素中使用图形元素绘制一个选区,然后在要使用裁剪的元素上使用clip-path属性引用声明的<clipPath>元素即可. 示例1: <!DOCTYPE html> <htm…