SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。
SVG是W3C制定的一种新的二维矢量图形格式,也是规范中的网络矢量图形标准。
SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。
与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:
SVG 图像可通过文本编辑器来创建和修改;
SVG 图像可被搜索、索引、脚本化或压缩;SVG 是可伸缩的;SVG 图像可在任何的分辨率下被高质量地打印;
SVG 可在图像质量不下降的情况下被放大
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> svg { border: 1px solid silver; } </style> </head> <body> <!-- 基本形状 --> <svg width="200" height="150"> <!-- 矩形 - rect元素属性:x:矩形左上角的坐标(用户坐标系)的x值。y:矩形左上角的坐标(用户坐标系)的y值。width:矩形宽度。height:矩形高度。 --> <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="2" /> <!-- 矩形 - rx:实现圆角效果时,圆角沿x轴的半径。ry:实现圆角效果时,圆角沿y轴的半径。 --> <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="2" /> <!-- 圆 - circle元素:r:圆的半径。cx:圆心坐标x值。cy:圆心坐标y值。 --> <circle cx="125" cy="25" r="15" stroke="red" fill="transparent" stroke-width="2" /> <!-- 椭圆 - ellipse元素:rx:半长轴(x半径)。ry:半短轴(y半径)。cx:圆心坐标x值。cy:圆心坐标y值。 --> <ellipse cx="170" cy="25" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="2" /> <!-- 直线 - line元素:x1:起点x坐标。y1:起点y坐标。x2:终点x坐标。y2:终点y坐标。 --> <line x1="10" x2="40" y1="50" y2="80" stroke="orange" fill="transparent" stroke-width="2" /> <!-- 折线 - polyline元素:points:一系列的用空格,逗号,换行符等分隔开的点。每个点必须有2个数字:x值和y值 --> <polyline points="50,50 50,60 60,60 60,70 70,70 70,80" stroke="orange" fill="transparent" stroke-width="2" /> <!-- 多边形 - polygon元素:points:一系列的用空格,逗号,换行符等分隔开的点。每个点必须有2个数字:x值和y值。 --> <polygon points="220,100 300,210 170,250" stroke="green" fill="transparent" stroke-width="2" /> <!-- path元素的d属性,代表路径数据。在d的值中,M代表移至(Move to),L代表划线至(Line to),Q代表二次贝塞尔曲线,T代表没有控制点的二次贝塞尔曲线 ,C代表三次贝塞尔曲线,S代表省略第一个控制点的三次贝塞尔曲线,H代表水平划线,V代表垂直划线,A代表绘制圆弧,Z代表闭合路径。 以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。--> <path d="M20,130 Q40,105 50,130 T90,130" fill="none" stroke="blue" stroke-width="2" /> </svg> <!-- <g>元素代表“组”,组内的元素作为一个整体。如果为组添加了变换属性,那么组中所有内容都会进行变换。变换属性包含了旋转、变形、缩放和斜切。 --> <svg width="200" height="150"> <g transform="translate(60,0) rotate(30) scale(0.75)" id="ShapeGroup"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect> <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> </g> </svg> <!-- SVG中的<defs>元素用于定义留待将来使用的内容。可以用<use>元素将<defs>定义的内容链接到需要展示的地方。 --> <svg width="200" height="150"> <defs> <g id="ShapeGroup"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect> <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> </g> </defs> <use xlink:href="#ShapeGroup" transform="translate(60,0) rotate(90) scale(0.4)"></use> <use xlink:href="#ShapeGroup" transform="translate(80,30) rotate(0) scale(0.75)"></use> <use xlink:href="#ShapeGroup" transform="translate(20,60) rotate(39) scale(0.25)"></use> </svg> <!-- 图案和渐变 --> <svg width="200" height="150"> <defs> <!-- 图案填充 patternUnits值默认为objextBoundingBox,指pattern大小是占所填充图形的大小 --> <pattern id="RectPattern" width=".2" height=".2"> <rect x="0" y="0" width="5" height="5" stroke="black" fill="green" stroke-width="1" /> </pattern> <pattern id="TrianglePattern" width="10" height="10" patternUnits="userSpaceOnUse"> <polygon points="5,0 10,10 0,10" /> </pattern> <!-- linearGradient元素 - 定义线性渐变,x1,y1,x2,y2属性定义了渐变的方向,默认不写的话是水平渐变 --> <linearGradient id="LineGradient" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stop-color="#000"></stop> <stop offset="100%" stop-color="#f00"></stop> </linearGradient> <!-- radialGradient - 定义径向渐变,cx,cy,r属性定义了径向渐变的圆心和半径 ,fx,fy属性定义颜色中心处的位置--> <radialGradient id="RadialGradient" cx="0.5" cy="0.5" r="1" fx="0.75" fy="0.75"> <stop offset="0%" stop-color="red" /> <stop offset="100%" stop-color="blue" /> </radialGradient> </defs> <rect x="5" y="5" width="90" height="60" stroke="red" fill="url(#LineGradient)" /> <rect x="100" y="5" width="90" height="60" stroke="red" fill="url(#RadialGradient)" /> <rect x="5" y="70" width="90" height="60" stroke="red" fill="url(#RectPattern)" /> <rect x="100" y="70" width="90" height="60" stroke="red" fill="url(#TrianglePattern)" /> </svg> <!-- SVG文本 --> <svg width="300" height="150"> <!-- 文本元素text text-anchor设置水平对齐的方式,start、middle、end。默认值是start。--> <text x="10" y="20" stroke="#00f" fill="#00f" font-size="20px" font-weight="bold"> 你好,SVG <!-- 文本区间 - tspan元素,它用于渲染一个区间内的文本;它只能出现在text元素或者tspan元素的子元素中。典型的用法就是强调显示部分文本。rotate用于设置字体的旋转角度,x、y用于设置包含的文本的绝对坐标值 --> <tspan font-weight="bold" fill="red">今天是个好天气</tspan> </text> <text x="10" y="70" stroke="#00f" fill="#00f" font-size="13px" font-weight="bold"> <!-- 文本路径 - textPath元素:xlink:href属性获取指定的路径并把文本对齐到这个路径上,艺术字效果 --> <textPath xlink:href="#my_path">今天是个好天气</textPath> </text> <path d="M20,50 Q40,25 50,50 T90,50" id="my_path" fill="none" stroke="blue" stroke-width="5" /> </svg> <!-- SVG图片 --> <svg width="200px" height="150px"> <image xlink:href="images/1.jpg" x="0" y="0" height="150px" width="200px" /> </svg> <!-- SVG滤镜 --> <svg width="200px" height="150px"> <defs> <!-- <filter> 标签用来定义 SVG 滤镜。<filter> 标签使用必需的 id 属性来定义向图形应用哪个滤镜 <filter> 标签必须嵌套在 <defs> 标签内。 --> <filter id="Gaussian_Blur"> <!-- <feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的程度,in="SourceGraphic" 这个部分定义了由整个图像创建效果 --> <feGaussianBlur in="SourceGraphic" stdDeviation="10" /> </filter> </defs> <image xlink:href="images/1.jpg" x="0" y="0" height="150px" width="200px" filter="url(#Gaussian_Blur)" /> </svg> <!-- SVG动画实例 attributeName表示要变化的元素属性名称 attributeType支持三个固定参数:CSS、XML、auto,用来表明attributeName属性值的列表。x、y以及transform属于XML;opacity等CSS属于CSS;auto为默认值 from 动画的起始值 to 指定动画的结束值 by 动画的相对变化值 values 用分号分隔的一个或多个值,可以看成是动画的多个关键值点 begin 指动画开始的时间 beigin="3s;6s"表示的是3s之后动画走一下,6s时候动画再走一下 begin=[元素的id].begin/end +/- 时间值 表示其它动画begin或者end之前或者之后动画开始,可以实现两个独立元素的动画级联效果。 begin=[元素的id].[事件类型] +/- 时间值 表示事件触发之后动画开始 begin=[元素的id].repeat(整数) +/- 时间值 指其它动画重复N次之后动画开始 begin="indefinite",表示“无限等待”。 dur属性值只有两种:常规时间值 | "indefinite" "indefinite"指动画不执行 calcMode, keyTimes, keySplines 控制动画曲线 calcMode属性支持4个值:discrete | linear | paced | spline repeatCount表示动画执行次数 repeatDur定义重复动画的总时间 fill表示动画间隙的填充方式。支持参数有:freeze | remove。其中remove是默认值,表示动画结束直接回到开始的地方。freeze 表示动画结束后元素保持了动画时的状态 accumulate 累积 支持参数有:none | sum。默认值是none, sum表示动画结束时候的位置作为下次动画的起始位置 additive控制动画是否附加。支持参数有:replace | sum。默认值是replace ,sum表示动画会附加到其他低优先级的动画上 内置的API:svg.pauseAnimations()暂停和svg.unpauseAnimations()启动动画 --> <svg width="200px" height="150px"> <text font-size="20" y="30" x="0"> 蒲公英 <set attributeName="x" attributeType="XML" to="60" begin="2s" /> </text> <text font-size="20" y="60" x="0"> 蒲公英 <animate attributeName="x" to="60" begin="0s" dur="2s" repeatCount="indefinite" /> </text> <text font-size="20" y="90" x="0"> 蒲公英 <!-- <animateTransform>用于实现transform变换动画效果 --> <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="1.2" begin="0s" dur="2s" repeatCount="indefinite" /> </text> <text font-size="20" y="120" x="0"> 蒲公英 <!-- <animateMotion>可以让SVG各种图形沿着特定的path路径运动 --> <animateMotion path="M 0 0 H 30 V 30 Z" begin="0s" dur="3s" repeatCount="indefinite" /> </text> </svg> <svg width="200px" height="150px"> <text font-size="20" y="30" x="0"> 蒲公英 <animate attributeName="x" values="0;50;0;70;0" dur="2s" repeatCount="indefinite" /> </text> <text font-size="20" y="60" x="0"> 蒲公英 <animate id="x1" attributeName="x" to="70" dur="2" fill="freeze" /> <animate attributeName="y" begin="x1.end" to="80" dur="2" fill="freeze" /> </text> <g> <circle id="circle" cx="10" cy="85" r="10" /> <text font-size="20" y="90" x="30"> 蒲公英 <animate id="x2" attributeName="x" begin="circle.click" to="70" dur="2" /> </text> </g> <text font-size="20" y="120" x="0"> 蒲公英 <animate id="x3" attributeName="x" to="70" dur="2" repeatCount="3" /> <animate attributeName="y" begin="x3.repeat(2)" to="150" dur="2" fill="freeze" /> </text> </svg> <svg width="200px" height="150px" onclick="func(this)"> <g> <text font-size="20" y="30" x="50"> 蒲公英 <animate id="animate1" attributeName="x" begin="indefinite" to="70" dur="1" repeatCount="indefinite" /> </text> <a xlink:href="#animate1"> <text y="30" fill="#cd0000" font-size="20">点击</text> </a> </g> <text font-size="20" y="60" x="0"> 蒲公英 <animate attributeName="x" dur="3" values="40;60;80;100" calcMode="discrete" repeatCount="indefinite" /> </text> <text font-size="20" y="90" x="0"> 蒲公英 <animate attributeName="x" dur="3" values="40;60;80;100" calcMode="paced" repeatCount="indefinite" /> </text> <text font-size="20" y="120" x="0"> 蒲公英 <animate attributeName="x" dur="3" values="40;60;100" keyTimes="0; .8; 1" calcMode="spline" keySplines=".5 0 .5 1; 0 0 1 1" repeatCount="indefinite" /> </text> </svg> <script> function func(this_obj) { if (!this_obj.paused) { this_obj.paused = true; this_obj.pauseAnimations(); } else { this_obj.paused = false; this_obj.unpauseAnimations(); } } </script> <svg xmlns="http://www.w3.org/2000/svg" width="400px" height="150px" version="1.1"> <rect id="rec" x="300" y="100" width="300" height="100" style="fill: lime"> <animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0" /> <animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0" /> <animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="400" /> <animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="150" /> <animate attributeName="fill" attributeType="CSS" from="lime" to="red" begin="2s" dur="4s" fill="freeze" /> </rect> <g transform="translate(50,50)"> <text id="TextElement" x="0" y="0" style="font-size: 24; visibility: hidden"> It's SVG! <set attributeName="visibility" attributeType="CSS" to="visible" begin="0s" dur="5s" fill="freeze" /> <animateMotion path="M 0 0 L 100 50" begin="1s" dur="5s" fill="freeze" /> <animate attributeName="fill" attributeType="CSS" from="red" to="blue" begin="1s" dur="5s" fill="freeze" /> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="1s" dur="5s" fill="freeze" /> <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" begin="1s" dur="5s" fill="freeze" /> </text> </g> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="150" version="1.1"> <rect x="0" y="0" width="200" height="150" style="fill: blue"> <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" /> </rect> </svg> <!-- 超链接 --> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="150" version="1.1"> <a xlink:href="http://www.w3schools.com" target="_blank"> <rect x="0" y="0" width="200" height="150" style="fill: blue; stroke: pink; stroke-width: 5; opacity: 0.9" /> </a> </svg> </body> </html>
标签:obj,示例,--,svg,图像,基础,SVG,图形,蒲公英 From: https://www.cnblogs.com/caroline2016/p/17243445.html