svg基础--基本语法与标签

###svg系列–基础
这一系列的文章会总结svg的基础知识和一些经典的案例。

####svg简介
SVG（Scalable Vector Graphics）is an XML-based Language for creating graphics.
这是MDN英文文档对svg的介绍。

svg支持css,这一点有效的将图形和样式区分开。svg的应用：
1、绘图
2、动画

####如何在网页中引用svg元素

    svg元素可以通过<embed>、<object>或者<iframe>嵌入网页之中，但是我们这里推荐使用<embed>,兼容性比较好。<embed src="circle.svg" type="image/svg+xml" /><svg width="" height="">绘制的内容</svg>

####一些公共属性

    ----------------公共属性----------------fill: 填充色 | url(id)这里主要是引用渐变色作为背景stroke: 线条的颜色stroke-width: 线条的宽度stroke-linecap: 线条末尾的样式 (默认)butt (圆角)round (方形)square ----- round和square会影响线条的长度opacity: 不透明度  0~1fill-rule: nonzero (非零环绕原则)evenoddstroke-dasharray: 创建虚线数组 x,y,z,..... (长度，间隔，长度，间隔，。。。。)stroke-dashoffset: 偏移filter: url(id) 添加滤镜

####绘制矩形

    ---------矩形---------<rect x="" y="" rx="" ry="" width="" height=""></rect>(x, y): 左上角坐标rx: x轴圆角半径ry: y轴圆角半径width: 长度height: 高度

####绘制圆

    ---------圆---------<circle cx="" cy="" r=""></circle>(cx, cy): 圆心r: 半径

####绘制椭圆

    --------------椭圆--------------<ellipse cx="" cy="" rx="" ry=""></ellipse>(cx, cy): 中心点rx: x轴半径ry: y轴半径

####绘制线条

    --------线条--------<line x1="" y1="" x2="" y2=""></line>(x1, y1): 线条的起始点(x2, y2): 线条的结束点

####绘制多边形

    ---------------多边形polygon---------------<polygon points=""></polygon>  points: x,y x1,y1 ........

####绘制曲线

    ----------------曲线polyline----------------<polyline points=""></polyline>  points: x,y x1,y1 .........

####绘制路径

    ---------------路径---------------<path d=""></path>d: 路径的描述主要的语法：M： moveToL: lineToH: horizontal lineToV: vertical lineToC: curvetoS: smooth curvetoQ: quadratic Bézier curveT: smooth quadratic Bézier curvetoA: elliptical ArcZ: closepath命令区分大小写，除了Z。大写表示绝对位置，小写表示相对位置。

####绘制文本

    ---------------绘制文本---------------<text x="" y="" text-anchor="" dx="" dy="">text</text>(x, y): 文字左下角的起始坐标text-anchor: start middle end 文本锚点(可能会和我们预期的坐标有出入)dx: 横轴的偏移dy: 纵轴的偏移路径文本的绘制<textPath xlink:href="#path">text</textPath><text>中还可以嵌套<tspan x="" y="">text</tspan>同时文本也可以作为超链接<a xlink:href="" target=""><text></text></a>

####滤镜的使用

    -----------------滤镜-----------------<filter id=""></filter>

MDN的案例
####渐变

  --------------渐变--------------线性渐变<linearGradient x1="" y1="" x2="" y2="" gradientUnits><stop offset="" style="stop-color:;stop-opacity:;"></stop></linearGradient>gradientUnits: 定义坐标 userSpaceOnUse(不会对pattern的单位进行缩放) | objectBoundingBox(会)x1: 渐变开始横坐标y1: 渐变开始纵坐标x2: 渐变结束横坐标y2: 渐变结束纵坐标offset: 渐变开始的位置 0% - 100%放射性渐变<radialGradient cx="" cy="" r="" fx="" fy="" gradientUnits><stop offset="" style="stop-color:;stop-opacity:;"></stop></radialGradient>gradientUnits: 定义坐标 userSpaceOnUse(不会对pattern的单位进行缩放) | objectBoundingBox(会)cx: 外层圆心横坐标cy: 外层圆心纵坐标fx: 内层圆心横坐标fy: 内层圆心纵坐标r: 发散的半径offset: 渐变开始的位置 0% - 100%

####常用的几个标签

  ----------裁剪----------<clipPath id="">裁剪路径</clipPath>----------引用元素----------<defs>声明引用元素</defs>----------拷贝----------<use x="" y="" width="" height="" xlink:href="id"></use>    (x, y): 克隆对象的左上角坐标width: 克隆对象的宽度height: 克隆对象的高度xlink:href 引用克隆对象----------模式----------  <pattern id="" width="" height="" patternUnits="" patternTransform="">模式内的形状</pattern>width: 模式的宽度height: 模式的高度patternUnits: 定义pattern的坐标系统 userSpaceOnUse(不会对pattern的单位进行缩放) | objectBoundingBox(会)patternTransform: 变换----------遮罩----------<mask maskUnits="" x='' y="" width="" height="">内容</mask>(x, y): 裁剪的左上角坐标。width: 裁剪的宽度height: 裁剪的高度

####CSS3中的svg的影子

    ---------------------clip-path 裁剪---------------------clip-path:第一种: url(id) 配合svg的<clipPath>第二种: polygon(x y,x1 y1,x2 y2,.......)第三种：inset(top right bottom left round rt rr rb rl) 圆角矩形这里比较重要的一点就是polygon的过渡动画必须要求各个状态的点的个数一样

如果本文对您有帮助，欢迎关注微信公众号，为您推送更多内容，ε=ε=ε=┏(゜ロ゜;)┛。

svg基础--基本语法与标签相关推荐

【2022.7.11】HTML基础介绍语法常用标签超文本链接锚点定位
来自2022.7.11 今日学习一.HTML基础介绍 1.网页 1.1什么是网页 1.2什么是HTML 1.3超文本 1.4网页的形成 2.常用浏览器 2.1常用浏览器 2.2浏览器内核 3.web ...
2021-08-11 svg基础标签
一,概述 svg是一种基于XML语法的图像格式,全称是可缩放矢量图( Scalable Vector Graphics ).其他图像格式都是基于像素处理的,SVG则是属于对图像的形状描述,所以它本质上 ...
前端基础-HTML的的标签详解
阅读目录一.head内常用标签二. HTML语义化三. 字符实体四. h系列标签五. p标签六. img标签七. a标签八. 列表标签九. table标签十. form标签一. ...
svg基础+微信公众号交互(二)
svg基础+公众号交互(二) 欢迎点击: 个人官网博客. 话接上回- 上节我们讲了svg基础及简单的动画demo及案例,这节我们来讲一些难度更高的svg交互. 效果图: 不要激动,这不是css,也不是 ...
JS基础核心语法（1）
JS基础核心语法 JS的简介 JS的组成 JS的特点 JS的使用 JS的输出 JS的调试 JS的语法规范报错类型标识符 JS的执行代码过程: 有无var关键字声明变量的区别 JS的简介视图(vi ...
2022Java基础、语法最全面试题，为秋招做好准备
Java基础.语法: 1.Java跨平台原理(字节码文件.虚拟机) C/C++语言都直接编译成针对特定平台机器码.如果要跨平台,需要使用相应的编译器重新编译. Java源程序(.java)要先编译成与 ...
深入理解 SVG 系列（一） —— SVG 基础
来源:https://segmentfault.com/a/1190000015652209 本系列文章分为三个部分: 第一部分是 SVG 基础. 主要讲 SVG 的一些基础知识,包括 SVG 基本元 ...
mysql怎样查表的模式_mysql常用基础操作语法（四）--对数据的简单无条件查询及库和表查询【命令行模式】...
1.mysql简单的查询:select 字段1,字段2... from tablename; 如果字段那里写一个*,代表查询所有的字段,等同于指定出所有的字段名,因此如果要查询所有字段的数据,一般都是 ...
模板语法-插入文本//模板语法-插入标签//模板语法-双花括号//模板语法-向标签属性中插入数据
模板语法-插入文本 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...

svg基础--基本语法与标签

svg基础--基本语法与标签相关推荐

最新文章

热门文章