当前位置：网站首页 > 技术文章 > 正文

SVG 坐标系统（svg 定位）

zhezhongyun 2025-07-10 22:04 3 浏览

在开始学习如何绘图之前，我们先来看一下 SVG 的坐标系统。与很多计算机绘图所使用的坐标系统一样，SVG 也使用了网格坐标系统。这种坐标和我们以前在数学中学过的坐标有些不同。

数学中的坐标是由 x 轴（水平横向延伸）和 y 轴（垂直纵向延伸）交织组成，交点被称为坐标原点 (0,0) 。原点沿 x 轴向右为正值，反之为负值，沿 y 轴向上为正值，反之为负值。

而 SVG 网格坐标系统的特点如下所示：

以左上角为坐标系的原点，即 (0,0)。
横向延伸为 X 轴正方向， x 坐标逐渐增大。纵向为 Y 轴正方向，y 坐标逐渐增大。
坐标以像素 px 为单位。

坐标系统单位

SVG 坐标系中对应的值可以指定单位，也可以不指定单位，如果不指定单位则默认单位为 px。

下面是 SVG 中支持的长度单位，包含了常见的 CSS 单位：

画布

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

SVG 视口(ViewPort)

SVG 的渲染都是在一个矩形区域内发生的，这个有限的矩形区域在 SVG 中被称为"视口"，超出这个视口的图形将会被裁切并且隐藏。所以视口也就是 SVG 的渲染区域，用户能看到 SVG 内容的区域。

那么为什么超过视口的元素会被隐藏呢？这是因为每个 SVG 元素都有一个默认的 overflow: hidden 样式，所以超过视窗的内容不可见。如果想要让超出部分变为可见，可以将 overflow 属性的值设置为 visible 。

示例：

例如我们看下面这个例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SVG学习(9xkd.com)</title>
        <link rel="styleSheet" type="text/css" href="./style.css">
    </head>
    <body>
        <svg>
            <rect width="300" height="300" style="fill:pink;"/>
        </svg>
    </body>
</html>

上述代码中，我们绘制了一个宽为 300px ，高为 300px 的矩形，矩形的填充的颜色为粉色。但是因为我们没有这个 SVG 的视口宽高，所以视口会默认宽高为 300px * 150px，所以在浏览器中可以看到，矩形的高被隐藏了一半：

除了像上述所说的将 overflow 属性设置为 visible，例如：

<svg style="overflow:visible;">
    <rect width="300" height="300" style="fill:pink;"/>
</svg>

我们还可以通过给 <svg> 元素设置 width 和 height 属性来给 SVG 视口设置宽和高。只要给视口设置的宽高大于绘制图形的宽高，那么图形就能够完整的显示啦。

其实画布和视口是两个比较容易混淆的概念，每当我们创建一个 <svg> 元素时，就相当于创建了一个无穷大的画布和一个视口。画布和视口分别对应两个坐标系统，一个为用户坐标系，一个为视窗坐标系。

overflow 属性

上一篇：小程序cover-view踩坑系列2（微信小程序overflow）
下一篇：Web前端【超出隐藏与显示】多种解决方案集锦

SVG 坐标系统（svg 定位）

坐标系统单位

画布

SVG 视口(ViewPort)

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

接口测试遇到500报错?别慌，你的头部可能有点问题

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

关于HTML5被简称做H5，你怎么看?（html5缩写）

现在页面实时聊天都使用Websocket技术实现吗?