SVG

最新推荐文章于 2023-08-08 21:17:26 发布

来说垃圾话啊

最新推荐文章于 2023-08-08 21:17:26 发布

阅读量413

点赞数

分类专栏： CSS 文章标签： svg

本文链接：https://blog.csdn.net/qq_42241357/article/details/108948982

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、概述

svg是一种基于XML语法得图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的， SVG则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。

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

<!DOCTYPE html>
<html>
	<head></<head>
	<body>
		<svg id="mysvg" xmlns="http://www.w3.org/2000/svg"...</svg>
	</body>
</html>123456

上面是SVG代码直接插入网页的例子

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

<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>1234

CSS也可以使用SVG文件

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

SVG文件还可以转为BASE64编码，然后作为DateURL写入网页

二、语法

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

\<svg>的width属性和height属性，制定了SVG图像在html元素中所占据的宽度和高度。除了相对单位，也可以采用绝对单位（单位：像素）。如果不指定这两个属性，SVG图像默认大小是300像素（宽）*150像素（高）。

如果只想展示SVG图像的一部分，就要指定viewBox属性。

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

viewBox属性的值有四个数字，分别是左上角的横坐标和纵坐标，视口的高度和宽度。上面代码中，SVG图像是100像素宽*100像素高，viewBox属性指定视口从（50，50）这个点开始。所以，实际看到的是右下角的四分之一圆。

注意，视口必须适配所在的空间。上面代码中，视口的大小是5050，由于SVG图像的大小是100*100，所以视口会放大去适配SVG图像的大小，即放大了四倍。

如果不指定width和height属性，只指定viewBox属性，则相当于只给到定SVG图像的长宽比。这时，SVG图像的默认大小将等于所在的html元素的大小。

<circle>标签
<circle>标签代表圆形。

<svg width="300" height="180">
	<circle cx="30" cy="50" r="25"/>
	<circle cx="90" cy="50" r="25" class="red"/>
	<circle cx="150" cy="50" r="25" class="fancy"/>
</svg>12345

上面的代码定义了三个圆。标签的cx,cy,r属性分别为横坐标、纵坐标和半径。单位为像素，坐标都是相对于<svg>画布的左上角原点。
class属性用来指定对应的CSS类。

.red{
	fill:red;
}
.fancy{
	fill:none;
	stroke:black;
	stroke-width:3pt;
}

SVG的CSS属性与网页元素有所不同。

fill：填充色
stroke：描边色
stroke-width：边宽宽度

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

<svg width="300" height="180">
	<line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0); stroke-width:5"/>
</svg>

…

来说垃圾话啊

关注

0
点赞
踩
0

收藏

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

一、概述svg是一种基于XML语法得图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的， SVG则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。SVG文件可以直接插入网页，成为DOM的一部分，然后用JavaScript和CSS进行操作。<!DOCTYPE html><html> <head></<head> <body> &l
复制链接

扫一扫