走进SVG_学习笔记

首页免费课走进SVG 笔记

走进SVG

                
                techird
            JS工程师

                    查看讲师更多课程 
                    techird讲师的其他课程
                
SVG实现Tooltip气泡效果
中级·27800
免费课程
                                
                难度中级
            
                时长 4小时56分
            
                学习人数
            
综合评分9.53
                            42人评价
                        查看评价
                                10.0
                                内容实用
                            
                                9.2
                                简洁易懂
                            
                                9.4
                                逻辑清晰

最热最新

慕虎7953788

基本图形：<rect>,<circle>,<ellipse><line><polyline><polygon> 基本属性：fill,stroke,stroke-width,transform

查看全部

0 采集收起来源：SVG的图形和属性
2018-03-22
立夏_非 01:08

官方文档

查看全部

0 采集收起来源：SVG简介
2016-06-25
轉身從此絔鏴

SVG 命名空间：http://www.w3.org/2000/svg var SVG_NS = "http://www.w3.org/2000/svg"; var shape = document.createElementNS( SVG_NS, 'svg' );

查看全部

0 采集收起来源：综合实例：SVG编辑器
2018-03-22
学之舟_36820

<svg width="400" height="300" viewBox="0,0,40,30" preserveAspectRatio="xMinYMin meet"></svg> 视窗：SVG 无限大视野：viewBox 观察区域 preserveAspectRatio meet: 让viewBox等比例的同时，viewBox完全在SVG中显示。viewBox大于SVG，等比例缩放。 slice: 保持viewBox比例，视野包含视窗，尽量填满SVG。viewBox大于SVG，不缩放，按SVG大小剪切。 none: 不关心比例，viewBox直接拉伸到最大填满viewport. 对齐方式：xMinYMin xMinYMid xMinYMax xMidYMin xMidYMid xMidYMax xMaxYMin xMaxYMid xMaxYMax 参考资料 http://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/

查看全部

0 采集收起来源：SVG-视野的概念
2018-03-22
学之舟_36820 04:42

线性变换方程 X' = aX + cY + e Y' = bX + dY + f 变换矩阵 a c e b d f 0 0 1 例子-平移 1 0 10 0 1 10 0 0 1 每个坐标都加10 X' = 1*X + 0*Y + 10 = X + 10 Y' = 0*X + 1*Y + 10 = Y + 10 例子-旋转 极坐标 X = r * cos(α) Y = r * sin(α) 经过旋转θ度后 X = r * cos(α+θ) Y = r * sin(α+θ) X' = r*cos(α)cos(θ) - r*sin(α)sin(θ) = cos(θ)*X - sin(θ)*Y + 0 Y' = r*cos(α)sin(θ) + r*sin(α)cos(θ) = sin(θ)*X + cos(θ)*Y + 0 旋转30度 cos(30) -sin(30) 0 sin(30) cos(30) 0 0 0 1 缩放 a和c直观控制 2 0 0 0 2 0 0 0 1 注意：多次变换中，第一次变换基于前驱坐标系，而后变换基于自身坐标系

查看全部

0 采集收起来源：SVG-坐标变换
2018-03-22
学之舟_36820 07:00

用户坐标系（世界坐标系）User Coordinate ：SVG所在的坐标系 自身坐标系 Current Coordinate ：图形元素或分组独立坐标系 前驱坐标系 Previous Coordinate ：父容器坐标系 参考坐标系 Reference Coordinate ：自身坐标系所参考的其他坐标系（例如：对齐）

查看全部

0 采集收起来源：SVG-四个坐标系
2018-03-22
慕九州1311592

贝塞尔曲线

查看全部

0 采集收起来源：贝塞尔曲线命令（C、Q）
2016-06-07
照南 02:58

svg：circle

查看全部

0 采集收起来源：SVG的图形和属性
2016-06-03
照南 02:52

svg：rect

查看全部

0 采集收起来源：SVG的图形和属性
2016-06-03
照南 00:25

svg:基本图形和属性

查看全部

0 采集收起来源：SVG的图形和属性
2016-06-03
慕粉3316018 03:35

path命令

查看全部

0 采集收起来源：Path概述
2016-05-31
Yannis_Nan

http://jsbin.com/lekob/5/edit 教程网站

查看全部

1 采集收起来源：SVG-垂直居中问题
2016-05-31
纪田杏仁 03:10

SVG的世界、视野、视窗的概念

查看全部

0 采集收起来源：SVG-视野的概念
2016-05-24
纪田杏仁

创建图形的接口：document.createElementNS(ns,TagName) [SVG拥有独立的namespace，故使用js创建元素时使用createElementNS（ns,TagName）接口] 添加图形的接口：element.appendChile(childElement) 设置/获取属性：element.setAttribute(name,value) element.getAttribute(name)

查看全部

0 采集收起来源：基本操作API
2016-05-23
纪田杏仁

rect、circle、line、polyline、polygon图形的基本（共有）属性： fill stroke stroke-width transform

查看全部

0 采集收起来源：SVG的图形和属性
2016-05-23