首页 > 代码库 > SVG 简介

SVG 简介

2024-10-15 03:50:02   212人阅读

　　SVG( Scalable Vector Graphics): 是可缩放的矢量图形的简称，它是一种使用XML来描述二维图形及其应用的语言。

　　 首先了解一下XML, 它和html 类似,如 <greeting>Hello</greeting>, 但是语法结构非常严格,  一个xml文档只有一个根元素；标签元素必须一一对应匹配；元素必须有结束标记，尤其是单标签；元素属性必须赋值，且值必须用引号括起来；最后这两点要注意一下，因为在html中,单标签后面的结束标记可以省略，如<br> 和<br /> 都可以；布尔属性的话，可以只写属性，<input type="checkbox" checked>

　　　<svg></svg> 元素：<svg> 元素定义了一个矩形区域供客户端的SVG解析器渲染，就如同浏览器通过<html>和</html> 元素知道了网页的开始和结束一样，<svg>元素帮助解析器获得这个矩形区域的位置，大小等信息。它有几个常用的属性：

　　1，xmlns： 取值为 http://www.w3.org/2000/svg, 定义了XML的命名空间;

　　2，x:           svg元素所定义的矩形区域左上角的X轴坐标, 默认值为0;

　　3，y:           svg元素所定义的矩形区域左上角的Y轴坐标, 默认值为0;

　　4,  width:    svg元素所定义的矩形区域的宽度, 默认值为100%;

　　5,  height:  svg元素所定义的矩形区域的主高度, 默认值为100%;

　　<g></g>元素： 它是一个容器元素，可以把相关的图形元素组合起来。比如用svg 画一辆汽车，汽车是由许多图形组成的，如果你要让这 汽车沿着一定的路径运动，这时就要把汽车看成一个整体，我们可以把组成汽车的图形都放到<g>元素，这样它们就是一个整体了，只要给<g>元素施加动作,所有的图形都会运动. 并且子元素继承<g>元素的属性和样式，代码更为简洁。简单画一下汽车

<svg width="500" height="200" xmlns="http://www.w3.org/2000/svg"> 
            <g id="car">
                <g>  <!--上面的黑色方块-->
                    <rect x=‘36‘ y=‘80‘ width=‘150‘ height=‘60‘/>
                </g>
                <g fill=‘#fff‘ stroke=‘#000‘> <!--下面的圆形-->
                    <circle cx=‘110‘ cy=‘154‘ r=‘17‘></circle>
                </g>
            </g>
</svg>

　　可以看到汽车长成了下面这个样子，非常丑陋。　

技术分享

　　我们给它增加一个动画，让它运动一下，同时看一下放到<g></g> 元素，可以把它们看成一个整体。最简单的动画就是css3 的transition和transfrom了，当鼠标放到svg元素上的时候，小车向右移动100px; css样式如下　　

<style>
        svg {
            background: yellow;
        }
        svg:hover #car {
            transform:translate(100px);
            transition: 3s;
        }
    </style>

　　当鼠标放到黄色区域时，小车整体向右移动了100px, 它们显然是一个整体了，这就是<g></g>元素容器的作用。

　　<image></image>元素， 引用外部的图片和svg 文件， 最主要的属性是xlink:href, 它的取值就是外部的url, 和html中的img 的src 一致，其他还有四个属性：

x,y, width, height ,x, y定义坐标，width/height 定义宽和高。

　　SVG 中的基本图形：

　　1， 线段: <line> 元素。两点确定一条线段，所以线段的基本属性，就是它的起止点的坐标， 一共有四个属性　

　　x1:           线段起点的X轴坐标，默认值为0；

　　y1:           线段起点的Y轴坐标，默认值为0；

　　x1:           线段终点的X轴坐标，默认值为0；

　　x1:           线段终点的Y轴坐标，默认值为0；

　　画一条简单的线段

<svg width="500" height="200" xmlns="http://www.w3.org/2000/svg"> 
    <line x1=‘50‘ y1=‘100‘ x2=‘200‘ y2=‘50‘></line>
</svg>

　　2， 矩形 <rect>元素：

　

　

　　

SVG 简介


联系
我们