HTML5中的SVG是ScalableVectorGraphic的简称，是一种用来绘制矢量图的HTML5标签，由万维网联盟定制，是一个基于可扩展标记语言，用于绘制二维可缩放矢量图形。是一种使用XML描述二维图形的语音，允许三种类型的图形对象：矢量图形、图像和文本。1.绘制一个圆circle标签用来创建一个圆，cx和cy属性定义圆中心的X和Y坐标，r是圆的半径，stroke和stroke-
HTML5中的SVG是Scalable Vector Graphic的简称，是一种用来绘制矢量图的HTML5标签，由万维网联盟定制，是一个基于可扩展标记语言，用于绘制二维可缩放矢量图形。
是一种使用XML描述二维图形的语音，允许三种类型的图形对象：矢量图形、图像和文本。
1.绘制一个圆
circle标签用来创建一个圆，cx和cy属性定义圆中心的X和Y坐标，r是圆的半径，stroke和stroke-width属性控制显示形状的轮廓，fill属性设置形状内的颜色<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" > <!--circle标签用来创建一个圆，cx和cy属性定义圆中心的X和Y坐标，r是圆的半径，stroke和stroke-width属性控制显示形状的轮廓，fill属性设置形状内的颜色--> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg></body></html>2.绘制简单的形状
<body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="400"> <!--绘制直线--> <line x1="0" y1="0" x2="200" y2="0" style="stroke: blue;stroke-width: 10" /> <circle cx="80" cy="80" r="60" stroke="blue" stroke-width="3" fill="red" /> <!--绘制矩形--> <rect x="20" y="160" width="150" height="150" style="fill:red;stroke:blue;stroke-width:5;"/> <!--绘制椭圆 rx：水平轴半径 ry:垂直轴半径--> <ellipse cx="300" cy="60" rx="100" ry="50" style="fill:red;stroke:blue;stroke-width:5"/> <!--绘制多边型，属性points用于定义多边形每个焦点的x和y--> <polygon points="260,130 320,240 410,220" style="fill:red;stroke:blue;stroke-width:5"/> <!--绘制曲线，且曲线的每一个部分均由直线构成，属性points用于定义曲线中直线的起点和终点坐标--> <polyline points="400,20 440,60 410,110 460,150 410,260 430,320" style="fill:none;stroke:blue;stroke-width:10" /> <!--绘制文本，属性x和y定义文本的其实坐标--> <text x="20" y="360" fill="red">这些都是SVG图形</text> </svg></body>
3.复用内容
使用SVG绘制一副图形后，使用defs元素标记该图形，然后使用use元素可以实现服用的效果。
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><svg viewBox = "0 0 500 500" version = "1.1"> <defs> <circle id = "s1" cx = "100" cy = "100" r = "50" fill = "red" stroke = "blue" stroke-width = "3"/> </defs> <use x = "0" y = "0" xlink:href = "#s1"/> <use x = "50" y = "50" xlink:href = "#s1"/></svg></body></html>
4.图形阴影
图形阴影效果需要借助SVG的滤镜功能
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <!--设置id作为滤镜的名称--> <filter id="f1" x="0" y="0" width="200%" height="200%"> <!--设置阴影的位置--> <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" /> <!--用来转换偏移的图像使之更接近黑色--> <feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" /> <!--stdDeviation设置迷糊量--> <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" /> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> </defs> <!--rect元素的filter属性用于将元素连接到f1滤镜--> <rect width="90" height="90" stroke="blue" stroke-width="5" fill="red" filter="url(#f1)" /></svg></body></html>
5.图形的渐变
SVG图形渐变可以分为线性渐变和放射渐变<linearGadient>元素定义线性渐变
<!doctype html><html><head> <meta charset="utf-8"> <title>5.2.5</title></head><body><svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <!--x1,y1,x2,y2用于设置渐变的开始和结束位置坐标--> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <!--stop元素用于设置渐变的颜色，可以有多个--> <!--offset设置渐变的位置--> <stop offset="0%" style="stop-color:red;stop-opacity:1" /> <stop offset="100%" style="stop-color:blue;stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /></svg></body></html>
根据渐变起始和结束坐标的不同，可以创建三种线性渐变效果。当y坐标相同，x坐标不同是创建水平渐变；当x坐标相同，y坐标不同时创建垂直渐变；当x和y坐标都不相同时，创建对角渐变。
<radialGradient>元素定义放射渐变
<!doctype html><html><head> <meta charset="utf-8"> <title>5.2.6</title></head><body><svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <!--cx,cy和r用于设置最外层圆的圆心和半径，fx和fy用于设置最内层圆--> <radialGradient id="grad1" cx="20%" cy="30%" r="30%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:red; stop-opacity:0" /> <stop offset="100%" style="stop-color:blue;stop-opacity:1" /> </radialGradient> </defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /></svg></body></html>
6.绘制***路径
<!doctype html><html><head><meta charset="utf-8"><title>5.2.7</title></head><body><svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" version="1.1"> <!--属性d用于设置路径数据，可以包含多个连续指令--> <path id="svg_1" d="m127,385l-1,-34l2,-31l5,-27l7,-19l9,-18l12,-18l15,-13l15,-9l17,-10l15,-7l15,-7l11,-6l19,-4l16,-9l6,-15l2,-15l1,-15l1,-17l3,-18l9,-10l13,-6l13,1l11,7l5,14l1,14l0,18l0,17l0,16l-7,18l-16,7l-13,4l-22,2l-12,0l-23,4l-13,12l-13,8l-9,11l-5,11l-5,12l-1,15l-1,14l-1,10l0,15l8,12l15,5l20,8l9,0l11,0l14,0l22,4l20,5l16,3l13,9l-2,16l-12,8l-14,4l-21,7l-21,2l-19,0l-30,-3l-25,0l-14,0l-12,0l-14,2l-20,0l-25,-4z" stroke-width="5" stroke="#000000" fill="#FF0000"/></svg></body></html> 
转载请说明出处
知优网 » HTML中的SVG（HTML中的标签通常分为）
知优网 » HTML中的SVG（HTML中的标签通常分为）
