svg详解

最新推荐文章于 2025-03-23 20:49:27 发布

顺其自然~

最新推荐文章于 2025-03-23 20:49:27 发布

阅读量3.4k

点赞数

文章标签： svg

本文链接：https://blog.csdn.net/fuhanghang/article/details/105200772

版权

定义

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。SVG 使用 XML 格式定义图像。在浏览器中展示的SVG需要浏览器解释执行，IE8不支持SVG。

实例：

<html>
<body>
 
<h1>My first SVG</h1>
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red" />
</svg>
 
</body>
</html>

SVG 代码写在SVG标签中。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。

svg预定义元素：

矩形 <rect>

圆形 <circle>

椭圆 <ellipse>

线 <line>

折线 <polyline>

多边形 <polygon>

路径 <path>

文字 <text>

分组<g>

g 标记就是’group’的简写，是用来分组用的，它能把多个元素放在一组里，对 g 标记实施的样式和渲染会作用到这个分组内的所有元素上。组内的所有元素都会继承 g 标记上的所有属性。用定义的分组还可以使用 use 进行复制使用。

clipPath-裁剪

能限制哪些地方可见，哪些地方不可见。标记指定的区域之外的所有内容都不会被显示(图像不会被绘制出来)。剪切路径是用clipPath元素定义的，属性clip-path可用来引用剪切路径。默认情况下，一个形状，其被剪切掉的区域（不可见的区域）是不响应鼠标事件的。

// 超出矩形区域将不会被绘制
<svg width="120" height="120"
viewPort="0 0 120 120" version="1.1"
xmlns="http://www.w3.org/2000/svg">

</svg>

use-深度复用

use 标记的作用是能从 SVG 文档内部取出一个节点，克隆它，并把它输出到别处。跟’引用’很相似，但它是深度克隆。

defs-模板

defs 元素用于预定义一个元素使其能够在 SVG 图像中重复使用，和 g 结合使用。

symbol-模板

symbol 标记的作用是定义一个图像模板，它的作用相当于 g 和 defs 的结合，你可以使用 use 标记实例化它，然后在 SVG 文档中反复使用，这种用法非常的高效。symbol 本身不会输出任何图像，只有使用 use 实例化后才会显示。。

text 元素用于定义文本

元素属性：

height 高
width 宽
style 定义css属性
fill 填充色
fill-opacity 填充透明度
fill-rule 图形填充规则 https://blog.csdn.net/zsy_snake/article/details/80960763
stroke-width 边框宽
stroke 边框颜色
stroke-opacity 边框颜色透明度
cx、cy 圆心坐标
r 半径
rx、ry 水平、垂直半径（椭圆）
x1、y1 直线起点坐标
x2、y2 直线终点坐标
points 多点坐标
d <path>中坐标 https://blog.csdn.net/zSY_snake/article/details/80962896