svg学习笔记

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…

<!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…

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

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

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

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

6. svg学习笔记-路径

路径相比于多边形<polygon>元素具有更强绘图能力,<polygon>元素可以绘制任意的多边形,而路径可以绘制任意的轮廓线,是线段,曲线,圆弧的组合形式.svg中可以使用<path>元素绘制路径,所有描述轮廓线的数据都放在d属性中,并且所有的路径必须以moveto命令开始,命令以大写的M开始,后面跟着用空格或者逗号分隔的x坐标和y坐标,例如: <path d="M 10,10 L 110,130" stroke="black&qu…

5. svg学习笔记-坐标系变换

之前我们编写图形元素的时候,编写好了位置大小就是固定的,通过坐标系变换,可以移动缩放,旋转图形,但必须声明的是,进行变换时是图形相对于坐标系的变化,就是图形是不发生变化的,而是坐标系发生了变化,比如缩放图形的时候,是图形的相对坐标系进行缩放然后图形重绘,所以你会看到怪异的现象,当你指定图形进行缩放的时候,图形也有了位移. translate变换 translate变化就是将图形进行位移,在图形元素上引用格式如下: transform="translate(x,y)" x是水平上的位移距…

3. svg学习笔记-基本形状和画笔属性

svg中可以绘制的基本图形有线段,矩形,多边形,圆,椭圆,分别来看一下这些基本图形: 线段使用<line>元素创建一条线段,格式如下: <line x1=" start-x " y1=" start-y " x2=" end-x " y2=" end-y " stroke="black"> 其中start-x和start-y为线段起点的x,y坐标,end-x和end-y为线段结束点…

1. svg学习笔记-在网页中使用svg

在网页中使用svg有以下三种方式 1. svg归根结底来说是一种图像格式,虽然有别于jpeg,gif,png等位图图像格式,所以在网页中能嵌入图像的地方都可以嵌入svg,例如将svg文件设置为<img>元素的src属性,或者是给任意的元素设置背景图像,或者是设置为CSS3的属性border-image.但是这种方式的缺点也很明显,就是浏览器在渲染svg图像的时候,会将svg描述的矢量图像转换成栅格图像用于显示,这就失去了svg的一部分功能,svg是文本描述的图像格式,可能会有一些引用文件,比如…

svg 学习笔记

http://git.oschina.net/heboliufengjie/demo/tree/master/svg?dir=1&filepath=svg&oid=3a442039721540d1ca920d7f45e6e0cd3dbbbdaa&sha=d67a78901664702a3ab2742c995ae969ccb626b0 document.createElementNs(ns,tagName)_______________________________________…

CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案

一.浏览器兼容 1.1.概要世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要可以分类为: 1).CSS兼容2).JavaScript兼容3).HTML兼容这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加…

ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测

一.开篇在博客注册了三年,今天才决定写第一篇博客,警告自己不要懒!!! 二.关于ArcGIS JS 版本选择在写这篇博客时ArcGIS JS 4.0正式版已经发布.它和3.x版本的不同是,Map不在是一个控件,而真的只是一张“图”,Map(4.0版本)需要在一个View里面来展示,在MapView里面就是一张平面图,在SceneView里面就一张三维地图.同一张地图在不同的View里面就可以呈现出不同的效果.但是4.0版本才是一个最初的版本,还有很多3.x有的功能没有被加入到其中.所以我打算…

Matplotlib学习笔记（二）

原 Matplotlib学习笔记参考:Python数据科学入门教程 Python3.6.1 jupyter notebook .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px solid #000; } .table { border-collapse: collapse !important; } .table td, .table th { backgr…

Matplotlib学习笔记（一）

原 matplotlib学习笔记参考:Python数据科学入门教程 Python3.6.1 jupyter notebook .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px solid #000; } .table { border-collapse: collapse !important; } .table td, .table th { backg…

Spark 基本函数学习笔记一

Spark 基本函数学习笔记一¶ spark的函数主要分两类,Transformations和Actions. Transformations为一些数据转换类函数,actions为一些行动类函数: 转换:转换的返回值是一个新的RDD集合,而不是单个值.调用一个变换方法, 不会有任何求值计算,它只获取一个RDD作为参数,然后返回一个新的RDD. 行动:行动操作计算并返回一个新的值.当在一个RDD对象上调用行动函数时, 会在这一时刻计算全部的数据处理查询并返回结果值. 这里介绍pyspark中常…

学习笔记-AngularJs（十）

前面一直在说自定义指令,但是却一直没有一次系统地去了解,现在需要我们一起来学习如何去使用自定义指令,去丰富html标签.属性,实现多元化.多功能的标签(或是属性).辣么,啥是指令?要了解指令,首先需要了解AngularJs的HTML编译器,简单地说让浏览器认识你自定义指令或是Angular的指令集,将其行为运用到DOM上(视图),分两个过程编译和链接,编译阶段是遍历DOM并且收集所有的相关指令,生成一个链接函数:链接阶段是给通过编译阶段调用所说的链接函数来将模板与作用域链接起来,绑定一个作用域,…

【svg学习笔记】的更多相关文章

8. svg学习笔记-文本

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

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

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

svg学习笔记（一）

svg学习笔记（二）

svg学习笔记

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

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

6. svg学习笔记-路径

5. svg学习笔记-坐标系变换

3. svg学习笔记-基本形状和画笔属性

1. svg学习笔记-在网页中使用svg

svg 学习笔记

CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案

ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测

Matplotlib学习笔记（二）

Matplotlib学习笔记（一）

Spark 基本函数学习笔记一

学习笔记-AngularJs（十）

D3学习笔记一

canvas学习笔记（上篇）-- canvas入门教程 -- canvas标签/方块/描边/路径/圆形/曲线

dot language 学习笔记

amazeui学习笔记--css（常用组件6）--图标Icon

Angular6 学习笔记——路由详解

学习笔记：CentOS7学习之十七： Linux计划任务与日志的管理

Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

Vue学习笔记-vue-element-admin 前端学习

openresty 学习笔记小结:综合应用实例

【SwiftUI】学习笔记1-创建第一个iOS应用