随笔分类 -  SVG

SVG之图形的引用use、剪切clipPath和蒙板mask
摘要：一、使用<use>标签实现图形的引用 当我们在使用SVG绘制图形时，有时候会出现大量重复图形，这个时候我们就可以使用<use>标签进行图形引用，相当于图形的克隆。<use>标签在SVG文档内取得目标节点，并在别的地方复制它们。它的效果等同于这些节点被深克隆到一个不可见的DOM中，然后将其粘贴到use 阅读全文
posted @ 2018-07-30 11:14 风之之 阅读(2578) 评论(1) 推荐(1)
SVG之文本
摘要：一、文本标签<text> SVG支持直接对文本进行操作，如果我们需要在SVG中使用文本，那么我们需要使用到<text>标签。直接看一个简单的demo。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>text 阅读全文
posted @ 2018-07-03 15:24 风之之 阅读(5095) 评论(0) 推荐(0)
SVG之Path
摘要：一、Path概述 1、控制命令 SVG提供了一些基础图形元素标签如<circle>、<rect>、<ellipse>、<line>、<polyline>等，但是如果我们想要绘制一些特别的形状，比如一些曲线，那么我们就需要使用<path>标签，即路径标签。如果你足够熟练<path>，你可以使用它绘制任 阅读全文
posted @ 2018-07-01 16:11 风之之 阅读(2596) 评论(0) 推荐(0)
SVG之颜色、渐变和笔刷的使用
摘要：一、颜色 我们之前使用英文来表示颜色并进行填充，比如： <circle cx="800" cy="120" r="110" stroke="black" stroke-width="2" fill="red" /> 这些颜色都很简单所以用起来很方便，但是复杂的颜色就不行了，英文单词无法描述某些颜色， 阅读全文
posted @ 2018-06-30 22:42 风之之 阅读(3035) 评论(0) 推荐(0)
SVG坐标系统
摘要：一、SVG的世界、视野（viewBox）、视窗（viewPort） 1、基本概念 SVG的世界是无限大的。 SVG的视野viewBox是观察世界的矩形区域。 2、控制方法 使用<svg>标签的width，height 属性用来控制视窗。 使用<svg>其他代码用来定义svg世界 使用<svg>的vi 阅读全文
posted @ 2018-06-30 10:11 风之之 阅读(1333) 评论(1) 推荐(1)
SVG入门
摘要：一、SVG概念 1、SVG：XML文本格式描述的矢量图 Scalable Vector Graphics(简称SVG)，是“可扩展矢量图形”的意思。SVG是由W3C制定的基于可扩展标记语言(XML)来描述二维矢量图型的一个开放标准。SVG严格遵从XML语法，SVG并用文本格式的描述性语言来描述图像内 阅读全文
posted @ 2018-05-31 14:45 风之之 阅读(812) 评论(0) 推荐(0)