随笔分类 -  SVG

1
SVG渲染顺序及z轴显示问题（zIndex）
摘要：SVG是严格按照定义元素的顺序来渲染的，这个与HTML靠z-index值来控制分层不一样。 在SVG中，写在前面的元素先被渲染，写在后面的元素后被渲染。后渲染的元素会覆盖前面的元素，虽然有时候受透明度影响，看起来不是被覆盖的，但是SVG确实是严格按照先后顺序来渲染的。 注意：SVG是以XML定义的， 阅读全文
posted @ 2017-08-17 18:10 天马3798 阅读(3242) 评论(0) 推荐(0) 编辑
SVG 文字居中整理
摘要：一、基于SVG文档的文字居中 text-anchor: middle; //水平方向居中 dominant-baseline: middle; //垂直居中 1.使用内联样式配置居中 <svg style=' border:1px solid blue;width:300px;height:300p 阅读全文
posted @ 2017-08-09 17:24 天马3798 阅读(11928) 评论(1) 推荐(0) 编辑
SVG 使用marker画箭头（一）
摘要：一、使用Marker画箭头 1.定义一个箭头的marker引用 注：orient="auto" 这个属性，箭头的方向会自动适应线条的方向。 2.定义线line，添加marker-start，marker-mid，marker-end 添加箭头加入的相应位置 3.使用path，在曲线中指定箭头位置 显 阅读全文
posted @ 2017-08-09 11:50 天马3798 阅读(9317) 评论(1) 推荐(0) 编辑
SVG Path路径使用（一）
摘要：一、<path> 标签 <path> 标签用来定义路径。 下面的命令可用于路径数据： M = moveto L = lineto H = horizontal lineto V = vertical lineto C = curveto S = smooth curveto Q = quadrati 阅读全文
posted @ 2017-08-09 11:43 天马3798 阅读(3546) 评论(0) 推荐(0) 编辑
SVG.js 元素操作整理（二）-Transform
摘要：一、transform()获取或设置矩阵变换 二、独立方法，单个操作 更多： SVG.js 元素操作整理（一） SVG.js 引用获取整理 SVG.js Marker标记和自定义标签 阅读全文
posted @ 2017-04-04 17:44 天马3798 阅读(3114) 评论(0) 推荐(0) 编辑
SVG.js 元素操作整理（一）
摘要：一、属性操作Attributes 属性内容如下： 二、位置操作Positioning 三、大小操作Resizing 四、填充、描边、透明度操作 Syntatic 更多： SVG.js 引用获取整理 SVG.js Marker标记和自定义标签 SVG.js Mask覆盖和ClipPath裁剪 阅读全文
posted @ 2017-04-04 17:21 天马3798 阅读(10207) 评论(2) 推荐(0) 编辑
SVG.js 引用获取整理
摘要：一、SVG.get() 根据id获取元素 二、SVG.select（）/element.select() 根据CSS选择器获取 注：这里的select()方法用于draw、group 注：关于SVG的原始Dom元素操作、及在JQuery中的使用等此处省略 三、SVG 节点对象获取 四、SVG 根节点 阅读全文
posted @ 2017-04-04 10:06 天马3798 阅读(11094) 评论(2) 推荐(0) 编辑
SVG.js Marker标记和自定义标签
摘要：一、SVG.Marker 添加标记 SVG.Marker 标记可以被添加到一个线，折线的各点，多边形和路径。有三种类型的标记：开始，中间和结束。如果开始表示第一个点，则结束中间的最后一点和中间点。 var draw = SVG('svg1').size(300, 300); var line = d 阅读全文
posted @ 2017-04-02 11:31 天马3798 阅读(5857) 评论(2) 推荐(0) 编辑
SVG.js Mask覆盖和ClipPath裁剪
摘要：一、SVG.Mask 覆盖物设置 1. 2. 3. 4. 二、SVG.ClipPath 裁剪元素 1. 2. 更多： SVG.js 图案使用和use引用 SVG.js 颜色渐变使用 Svg.js 图片加载 阅读全文
posted @ 2017-03-31 22:47 天马3798 阅读(2828) 评论(1) 推荐(0) 编辑
SVG.js 图案使用和use引用
摘要：一.SVG.Pattern 图案设置 二.SVG.Use 元素的引用 1. 2.SVG.defs() 的声明定义，当use()再显示 3. 更多： SVG.js 颜色渐变使用 Svg.js 图片加载 SVG.js 文本绘制整理 阅读全文
posted @ 2017-03-31 22:37 天马3798 阅读(4824) 评论(0) 推荐(0) 编辑
SVG.js 颜色渐变使用
摘要：一、SVG.Gradient 1.线性渐变、径向渐变，设置渐变的起始点，设置径向渐变的外层半径 二、SVG.Stop 1.修改stop元素，修改Gradient内容 更多： Svg.js 图片加载 SVG.js 文本绘制整理 SVG.js 基础图形绘制整理（二） 阅读全文
posted @ 2017-03-27 22:22 天马3798 阅读(3361) 评论(0) 推荐(0) 编辑
Svg.js 图片加载
摘要：一.SVG.Image 1.创建和修改图片 2.图片加载成功事件 loader数据对象如下 更多： SVG.js 文本绘制整理 SVG.js 基础图形绘制整理（二） SVG.js 基础图形绘制整理（一） 阅读全文
posted @ 2017-03-27 22:13 天马3798 阅读(3846) 评论(0) 推荐(0) 编辑
SVG.js 文本绘制整理
摘要：1.SVG.Text 2.SVG.Tspan 3. SVG.TextPath 更多： SVG.js 基础图形绘制整理（二） SVG.js 基础图形绘制整理（一） Svg.Js 父类的基础操作 阅读全文
posted @ 2017-03-24 14:36 天马3798 阅读(3910) 评论(0) 推荐(0) 编辑
SVG.js 基础图形绘制整理（二）
摘要：一、折线 二、多边形 三、路径 更多： SVG.js 基础图形绘制整理（一） Svg.Js 父类的基础操作 Svg.Js A标签，链接操作 阅读全文
posted @ 2017-03-24 10:31 天马3798 阅读(3759) 评论(0) 推荐(1) 编辑
SVG.js 基础图形绘制整理（一）
摘要：一、矩形 二、圆形 三、椭圆形 四、直线 更多： Svg.Js 父类的基础操作 Svg.Js A标签，链接操作 Svg.Js 简介(转) 阅读全文
posted @ 2017-03-23 14:35 天马3798 阅读(7137) 评论(0) 推荐(0) 编辑
Svg.Js 父类的基础操作
摘要：一、SVG.Doc 创建SVG文档 二、SVG.Nested，SVG的嵌套 三、SVG.G ，SVG分组grop 四、SVG.Symbol ，SVG象征符号及使用 五、SVG.Defs ，获取SVG元素的引用 更多： Svg.Js A标签，链接操作 Svg.Js 简介(转) SVG Stroke属性 阅读全文
posted @ 2017-03-20 22:39 天马3798 阅读(1461) 评论(1) 推荐(0) 编辑
Svg.Js A标签，链接操作
摘要：一、创建a标签，为a标签添加内容 二、修改链接的地址 三、指定target 四、位置定元素添加a标签，likeTo() 更多： Svg.Js 简介(转) SVG 相关整理 SVG Stroke属性 阅读全文
posted @ 2017-03-20 22:28 天马3798 阅读(1252) 评论(0) 推荐(0) 编辑
Svg.Js 简介(转)
摘要：什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准 SVG 与诸如 DOM 和 XSL 之 阅读全文
posted @ 2017-03-20 22:23 天马3798 阅读(3488) 评论(0) 推荐(0) 编辑
SVG 相关整理
摘要：1. 中文参考手册： http://www.runoob.com/svg/svg-reference.html SVG HTML5 资源教程 http://www.html5tricks.com/tag/svg/ 2.SVG 入门到精通 http://www.w3cplus.com/blog/tag 阅读全文
posted @ 2017-03-20 21:22 天马3798 阅读(932) 评论(0) 推荐(0) 编辑
SVG Stroke属性
摘要：一、stroke属性介绍 SVG提供了一个范围广泛stroke属性，用于描述轮廓，其中包括 stroke 指定颜色 stroke-width 指定宽度 stroke-linecap 指定端点样式 stroke-dasharray 指定间隔线数组 1.所有的stroke属性，可应用于任何类的线条、文字 阅读全文
posted @ 2017-01-18 09:40 天马3798 阅读(4552) 评论(0) 推荐(0) 编辑

1