-
1.创建图形：document.createElementNS（ns,tagName) 2.添加图形：element.appendChild(childElement); 3.设置/获取属性：element.setAttribute(name,value);element.getAttribute(name);查看全部
-
基本图形 <rect>,<circle>,<ellipse>,<line>,<polyline><polygon> 基本属性 fill:填充颜色, stroke：描边途径, stroke-width描边大小, transform：变形 <rect> x，y:坐标 width，height:x,y轴上的长宽 rx,ry：圆角 <circle> cx,cy:圆的坐标（圆心） r:半径 <ellipse> cx,cy:椭圆坐标（圆心） r:半径 <line> x1,y1:一个点 x2,y2:另一个点 <polyline> points="x1 y1 x2 y2 x3 y3 x4 y4"查看全部
-
風雨兒 一、SVG简介 使用XML描述的矢量文件 W3C标准（1.1）：http://www.w3.org/TR/SVG11/ 浏览器支持情况：http://caniuse.com/#cats=SVG 二、SVG使用方式： ① 浏览器直接打开 ② 在HTML中使用<img>标签引用 ③ 直接在htm中使用SVG标签 ④ 作为CSS背景查看全部
-
<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查看全部
-
【Author LightXun】 【引用请转明出处】 【SVG】 3-1 RGB和HSL 1、都是CSS3支持的颜色表示方法 1-1)RGB 1-1-1)红色、绿色、蓝色三个分量 1-1-2)表示方式: rgb(r, g, b) 或 #rrggbb 1-1-3)每个分量取值范围: [0, 255] 1-1-4)优势: 显示器容易解析 1-1-5)劣势: 不符合人类描述颜色的习惯, 例如需要调整一个图像的颜色渐变, 需要调整3个参数进行 1-2)HSL 1-2-1)三个分量分别表示颜色、饱和度和亮度 1-2-2)格式: hsl(h, s%, l%) 1-2-3)取值范围: h:[0, 359] s,l:[0, 100] 1-2-4)优势: 符合人类描述颜色的习惯 1-3)透明度 1-3-1)rgba(r, g, b, a)和hsla(h, s%, l%, a) 表示带透明度的颜色 1-3-2)opacity属性表示元素的透明度 1-3-3)a和opacity的取值范围: [0,1] 1-4)在SVG中应用颜色 1-4-1)<rect fill="rgb(255, 0, 0)" opacity="0.5"/> 1-4-2)<rect stroke="hsla(0, 50%, 60%, 0.5)" /> 2、互相转换的原理 3、颜色搭配方案应用实例: http://paletton.com查看全部
-
【Author LightXun】 【引用请转明出处】 【SVG】 2-5 坐标变换 1、坐标变换定义 1-1)数学上, [坐标变换]是采用一定的数学方法将一个坐标系的坐标变换为另一个坐标系的坐标的过程. 1-2)SVG中, [坐标变换]是对一个坐标系到另一个坐标系的变换的描述. 6、transform 属性 6-1)前驱坐标系: 父容器的坐标系 6-2)transform 属性: 定义前驱坐标系到自身坐标系的线性变换 6-3)语法: 6-3-1)rotate(<deg>)* 6-3-2)translate(<x>,<y>)* 6-3-3)scale(<sx>,<sy>)* 6-3-4)matrix(<a>,<b>,<c>,<d>,<e>,<f>)* 6-4) svg 中viewbox设置 .5 属性使线条相对锐利查看全部
-
【Author LightXun】 【引用请转明出处】 【SVG】 2-5 坐标变换 5、线性变换列表 5-1)表示一系列的变换, 结果为变换的矩阵的乘积 M = Mn·Mn-1·...·M2·M1·M0 5-2)后面的变换成在前面, 顺序会影响最终结果 5-3)M(translate)·M(rotate) 1 0 10 cos(30°) -sin(30°) 0 0 1 10 · sin(30°) cos(30°) 0 0 0 1 0 0 1查看全部
-
【Author LightXun】 【引用请转明出处】 【SVG】 2-5 坐标变换 4、缩放 4-1)a 和 c 直观控制缩放 4-2)矩阵 2 0 0 0 2 0 0 0 1查看全部
-
【Author LightXun】 【引用请转明出处】 【SVG】 2-5 坐标变换 3、旋转 3-1)使用极坐标求变换矩阵 3-1-1)极坐标方程: X = r·cos(α) Y = r·sin(α) 3-1-2)旋转θ度后: X' = r·cos(α+θ) Y' = r·sin(α+θ) 3-1-3)展开: X' = r·cos(α)cos(θ) - r·sin(α)sin(θ) = cos(θ)X - sin(θ)Y + 0 Y' = r·cos(α)sin(θ) + r·sin(α)sin(θ) = sin(θ)X + cos(θ)Y + 0 3-1-4)矩阵 cos(30°) -sin(30°) 0 sin(30°) cos(30°) 0 0 0 1查看全部
-
一、SVG简介 使用XML描述的矢量文件 W3C标准（1.1）：http://www.w3.org/TR/SVG11/ 浏览器支持情况：http://caniuse.com/#cats=SVG 二、SVG使用方式： ① 浏览器直接打开 ② 在HTML中使用<img>标签引用 ③ 直接在htm中使用SVG标签 ④ 作为CSS背景查看全部
-
【Author LightXun】 【引用请转明出处】 【SVG】 2-5 坐标变换 2、线性变换 2-1)线性变换方程 2-1-1)X' = aX + cY + e 2-1-2)Y' = bX + dY + f 2-2)变换矩阵, 记为 M a c e b d f 0 0 1查看全部
-
【Author LightXun】 【引用请转明出处】 【SVG】 2-4 四个坐标系 1、用户坐标系(User Coordinate) 1-1)即为世界的坐标系 1-2)即为原始坐标系, 为svg标签坐标系, 其他坐标系都由用户坐标系开始来产生的 2、自身坐标系(Current Coordinate) 2-1)每个图形元素或分组独立与生俱来的坐标系 3、前驱坐标系(Previous Coordinate) 3-1)即为父容器的坐标系 4、参考坐标系(Reference Coordinate) 4-1)使用其他坐标系来考究自身的情况时使用 4-2)即为任意一个坐标系, 选取一个参考坐标系是为了观察图形当中的某一个情况 4-3)想从另外一个坐标系来描述自身的属性, 则该坐标系为描述的参考坐标系 5、坐标变换: 前驱坐标系经过了元素变换之后, 得到了元素的一个自身坐标系 5-1)transform="translate(50, 50)", 自身坐标系相对于前驱坐标系进行了坐标变换 6、所有的图形, 关于它图形自身描述的属性都肯定是基于它自己的自身坐标系来进行定义的查看全部
-
【Author LightXun】 【引用请转明出处】 【SVG】 2-3 坐标系统概述 1、svg中使用笛卡尔直角坐标系，为图形提供一个统一定位基准 2、原点 3、互相垂直的两条数轴, x轴水平向右, y轴垂直向下 4、角度定义, 角度的扫描方向为顺时针向下, 由x轴正方向到y轴正方向, 称为正角方向查看全部
-
【Author LightXun】 【引用请转明出处】 【SVG】 2-2 图形的分组 1、<g> 标签来创建分组 2、子元素可继承分组的属性 3、可在分组中transform属性来定义坐标变换 4、<g> 标签可嵌套使用查看全部
-
【Author LightXun】 【引用请转明出处】 【SVG】 2-1 视野的概念 1、视野与世界 1-1)SVG中的世界是无穷大的 1-2)绘制的矩形区域表示视野，是观察世界的一个矩形区域 1-3)SVG视野(viewbox)控制视野 2、SVG的世界、视野、视窗的概念 2-1)width, height - 控制视窗 用来渲染SVG内容的区域 2-2)SVG代码 - 定义世界 2-3)viewBox, preserveAspectRatio - 控制视野， 定义以多大的视野来观察定义的世界 2-3-1)meet&slice: 控制世界与视野的关系与填充问题 2-3-2)meet:根据视野等比例缩放 2-3-3)slice:就这么大, 自己调整视野去看 2-3-4)viewBox:控制用来观看SVG世界的视野大小 2-4)<svg xmlns="..." width="800" height="600" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet"></svg>查看全部
举报
0/150
提交
取消