随笔分类 -  SVG

SVG transform
摘要：【转】 SVG 学习<六> SVG的transform SVG元素也有transform属性，位移、缩放、倾斜、旋转。 这次一次性把代码都贴出来算了。 HTML代码 <svg xmlns="http://www.w3.org/2000/svg"> <rect class="No1" /> <rect 阅读全文
posted @ 2018-03-02 17:40 Fairyspace 阅读(222) 评论(0) 推荐(0)
SVG动画
摘要：【转】SVG 学习<五> SVG动画 先上个动画图 说道SVG动画不得不提到两个属性：stroke-dasharray（这个前面有提到，做虚线的）stroke-dashoffset （这个是关键）。 先说说stroke-dasharray 之前提过 可以把线条做成虚线状，值可以为一个数值 也可以是一 阅读全文
posted @ 2018-02-26 15:02 Fairyspace 阅读(173) 评论(0) 推荐(0)
SVG 基础API
摘要：【转】SVG 学习<四> 基础API JS代码 // 容器 var box = document.getElementById("box"); // 创建svg var svg = document.createElementNS("http://www.w3.org/2000/svg","svg" 阅读全文
posted @ 2018-02-12 09:29 Fairyspace 阅读(181) 评论(0) 推荐(0)
SVG渐变
摘要：【转】SVG 学习<三>渐变 SVG也可以做渐变 ， 可分为linear （线性渐变） 和 radial（放射渐变）两种。 linearGradient 线性渐变 HTML代码 <svg> <defs> <linearGradient id="grad1" x1="100%" y1="0%" x2= 阅读全文
posted @ 2018-02-11 17:20 Fairyspace 阅读(281) 评论(0) 推荐(0)
SVG的视窗，视野和全局（世界）
摘要：【转】SVG 学习<二>进阶 SVG世界，视野，视窗 stroke属性 svg分组 SVG的视窗，视野和全局（世界） SVG全局（世界）是无穷大的（SVG的全局并不局限于html的范围）； 例： <svg width="100%" height="100%" style="border: solid 阅读全文
posted @ 2018-02-11 15:19 Fairyspace 阅读(346) 评论(0) 推荐(0)
SVG基础图形及线段
摘要：【转】SVG 学习<一>基础图形及线段 svg标签用来绘制sgv图片(矢量图)；svg和H5中的canvas类似，svg也可以绘制任意图形或文字； svg标签默认大小为 300 * 150，svg也可设置css样式任意定义大小，颜色，边框，背景色等等； 注：svg默认为行级标签 绘制svg图形仅仅能 阅读全文
posted @ 2018-02-10 11:26 Fairyspace 阅读(428) 评论(0) 推荐(0)