没有合适的资源?快使用搜索试试~ 我知道了~
svg图像入门教程1
需积分: 0 0 下载量 118 浏览量
2022-08-08
22:25:32
上传
评论
收藏 51KB DOCX 举报
温馨提示
试读
14页
2.4 <polyline>标签<polyline>标签用于绘制一根折线 2.5 <rect>标签<rect>标签用于绘制矩形 2.6 <ellipse>标签<
资源详情
资源评论
资源推荐
一、概述
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"
viewBox="0 0 800 600"
preserveAspectRatio="xMidYMid meet">
<circle id="mycircle" cx="400" cy="300" r="50"
/><svg></body></html>
上面是 SVG 代码直接插入网页的例子。
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>
CSS 也可以使用 SVG 文件。
.logo {
background: url(icon.svg);}
SVG 文件还可以转为 BASE64 编码,然后作为 Data URI
写入网页。
<img src="data:image/svg+xml;base64,[data]">
二、语法
2.1 <svg>标签
SVG 代码都放在顶层标签<svg>之中。下面是一个例子。
<svg width="100%" height="100%">
<circle id="mycircle" cx="50" cy="50" r="50"
/></svg>
<svg>的 width 属性和 height 属性,指定了 SVG 图像在 HTML
元素中所占据的宽度和高度。除了相对单位,也可以采用
绝对单位(单位:像素)。如果不指定这两个属性,SVG
图像默认大小是 300 像素(宽) x 150 像素(高)。
如果只想展示 SVG 图像的一部分,就要指定 viewBox 属性。
<svg width="100" height="100" viewBox="50 50 50 50">
<circle id="mycircle" cx="50" cy="50" r="50"
/></svg>
<viewBox>属性的值有四个数字,分别是左上角的横坐标和纵
坐标、视口的宽度和高度。上面代码中,SVG 图像是 100
像素宽 x 100 像素高,viewBox 属性指定视口从(50, 50)这个点
开始。所以,实际看到的是右下角的四分之一圆。
注意,视口必须适配所在的空间。上面代码中,视口的大
小是 50 x 50,由于 SVG 图像的大小是 100 x 100,所
以视口会放大去适配 SVG 图像的大小,即放大了四倍。
如果不指定 width 属性和 height 属性,只指定 viewBox 属性,
则相当于只给定 SVG 图像的长宽比。这时,SVG 图像的
默认大小将等于所在的 HTML 元素的大小。
2.2 <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>
上面的代码定义了三个圆。<circle>标签的 cx、cy、r 属性分
别为横坐标、纵坐标和半径,单位为像素。坐标都是相对
于<svg>画布的左上角原点。
class 属性用来指定对应的 CSS 类。
.red {
fill: red;}
.fancy {
fill: none;
stroke: black;
stroke-width: 3pt;}
剩余13页未读,继续阅读
蒋寻
- 粉丝: 23
- 资源: 321
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0