SVG了解一下

最新推荐文章于 2022-07-27 00:45:34 发布

AnlanJion

最新推荐文章于 2022-07-27 00:45:34 发布

阅读量179

点赞数 1

本文链接：https://blog.csdn.net/AnlanJion/article/details/81874232

版权

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）

SVG 是对图像的形状描述

用法：

1：SVG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作。

<!DOCTYPE html>
<html>
<head></head>
<body>
<svg
  id="mysvg"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 800 600"
  preserveAspectRatio="xMidYMid meet"
>
  <circle id="mycircle" cx="400" cy="300" r="50" />
<svg>
</body>
</html>

2：SVG 代码也可以写在一个独立文件中，然后用<img>、<object>、<embed>、<iframe>等标签插入网页。

<img src="circle.svg">
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="icon.svg" type="image/svg+xml">
<iframe id="iframe" src="icon.svg"></iframe>

3：CSS 也可以使用 SVG 文件。

.logo {
  background: url(icon.svg);
}

标签：

SVG 代码都放在顶层标签<svg>之中

<svg width="100%" height="100%">
  <circle id="mycircle" cx="50" cy="50" r="50" />
</svg>

circle>标签代表圆形

<line>标签用来绘制直线。

<polyline>标签用于绘制一根折线。

<rect>标签用于绘制矩形

<ellipse>标签用于绘制椭圆。

<polygon>标签用于绘制多边形。

<path>标签用于制路径。

<text>标签用于绘制文本。

<use>标签用于复制一个形状。

<g>标签用于将多个形状组成一个组（group），方便复用

<defs>标签用于自定义形状，它内部的代码不会显示，仅供引用。

<pattern>标签用于自定义一个形状，该形状可以被引用来平铺一个区域

<image>标签用于插入图片文件。

<animate>标签用于产生动画效果。

<animate>标签对 CSS 的transform属性不起作用，如果需要变形，就要使用<animateTransform>标签

今天先到这里明天详细分析

AnlanJion

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SVG了解一下

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）SVG 是对图像的形状描述用法：1：SVG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作。&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;/head&gt;&l...
复制链接

扫一扫