当前位置: 首页 > article >正文

svg基础(一)

1 定义

可缩放矢量图形( Scalable Vector Graphics),是一种 XML应用

2 特征

  1. 一种可伸缩矢量图形
  2. 使用xml格式定义用于网络的基于矢量的图形
  3. 放大或改变图片的尺寸其质量不会有所损失

2.1 渲染顺序

SVG元素的一个规则是 后来居上 ,越后面的元素越可见

<svg width="200" height="200">
    <rect x="0" y="0" width="100" height="100" fill="red"/>
    <rect x="0" y="0" width="100" height="100" fill="orange"/> 
</svg>

上面的代码渲染后只看到橙色的矩形
在这里插入图片描述

2.2 单位

在SVG 中,可以指定值的单位,也可以不指定值的单位。不指定时,默认使用像素 (px) 作为单位。

上面代码中,width和height没有指定单位,那么单位默认就是px

支持的单位:

单位含义
em相对于父元素的字体大小
px相对于屏幕分辨率
%相对于父元素
cm即厘米
mm即毫米
in即英寸
pt1/72 英寸
pc12点活字,或1/12点

3 概念和属性

3.1 画布

SVG 画布就是用来绘制 SVG 内容的一个区域。这个画布可以无限延伸,可以在这个画布的任何位置绘制想要的内容。

画布和视窗之间的关联

  1. 每创建一个 <svg> 元素,就相当于创建了一个无穷大的画布,同时创建了一个视窗。
  2. 画布和视窗分别对应两个坐标系统,一个用户坐标系,一个视窗坐标系,这两个坐标系统默认是对齐的。

3.2 viewport

表示SVG可见区域的大小,可以通过 SVG 视窗看到画布,但只能看到了画布的一部分,超过视窗的部分会被裁切并且隐藏

为什么超过视窗的元素不可见?因为每个 SVG 元素都有一个默认的 overflow: hidden 样式,所以超过视窗的内容不可见。你也可以通过设置 overflow: visible 让超出视窗边界的内容变得可见。

通过设置svg元素的widthheight属性来给 SVG 视窗设置宽和高。

 <svg width="200" height="200">
        <rect x="0" y="0" width="100" height="100" fill="red"/>
 </svg>

以上代码设置了svg的视窗宽度为200px,高度为200px

3.3 viewBox

viewBox=“x y width height” // x:左上角横坐标,y:左上角纵坐标,width:宽度,height:高度

viewBox会从其x y指定的坐标处,截取宽width高height的矩形,并把该矩形铺满svg视窗

<svg width="200" height="200" style="border:1px solid red">
        <rect x="0" y="0" width="20" height="20" fill="orange" />
</svg>
<svg width="200" height="200" viewBox="0 0 10 10" style="border:1px solid red">
    <rect x="0" y="0" width="20" height="20" fill="orange" />
</svg>
<svg width="200" height="200" viewBox="10 10 20 20" style="border:1px solid red">
    <rect x="0" y="0" width="20" height="20" fill="orange" />
</svg>

注意对比以上代码和显示结果

在这里插入图片描述

 <svg width="400" height="300" style="border:1px solid red;">
        <rect x="10" y="5" width="20" height="15" fill="#cd0000" />
</svg>
<svg width="400" height="300" viewBox="0,0,40,30" style="border:1px solid red;">
    <rect x="10" y="5" width="20" height="15" fill="#cd0000" />
</svg>
<svg width="400" height="300" viewBox="10,5,40,30" style="border:1px solid red;">
    <rect x="10" y="5" width="20" height="15" fill="#cd0000" />
</svg>

注意对比以上代码和显示结果
在这里插入图片描述


http://www.kler.cn/a/226907.html

相关文章:

  • 微信小程序(三十一)本地同步存储API
  • Android battery saver 简单记录
  • GrayLog踩坑历险记
  • 微信小程序实现吸顶、网格、瀑布流布局
  • C++初阶 内存管理和模板
  • WordPress可以做企业官网吗?如何用wordpress建公司网站?
  • [Python] opencv - 什么是直方图?如何绘制图像的直方图?
  • 2021-07-02 51单片机按键控制LED灯逐个点亮
  • Unity_Shader
  • STC系列单片机定时器
  • aspose-words字体替换功能2
  • STL——空间配置器
  • C# 浅克隆与深克隆
  • JavaWeb01-JDBC、Druid连接池
  • Rust 第一个rust程序Hello Rust️
  • Leveraging Jexl in JavaScript: Practical Scenarios and Code Examples
  • 在VM虚拟机搭建NFS服务器
  • 如何进行大模型微调?
  • 【PCL】(九)点云体素下采样
  • 基于muduo网络库开发服务器程序和CMake构建项目 笔记