svg学习记录(二)

最新推荐文章于 2023-12-15 12:15:17 发布

赐你岁月如歌

最新推荐文章于 2023-12-15 12:15:17 发布

阅读量418

点赞数

文章标签： svg

本文链接：https://blog.csdn.net/a253399414/article/details/121070861

版权

在上一篇文章中，已经介绍了简单的SVG的绘画，如何去引入SVG文件。接下来继续看看SVG中的定位系统与viewBox的知识点。

在SVG元素使用的是坐标系统（网络系统），和Canvas类似。以页面的左上角为起标点，以px为单位，x轴的正方形是向右边的，而y轴正方向是向下边。

看下面这个例子，绘画一个矩形，在rect标签中加入x和y属性，从左上角开始，向右边偏移50px的距离，再向下偏移60px的距离，开始绘画一个宽高各100的矩形。

<svg width="200" height="200">
    <rect x="50" y="60" width="100" height="100" fill="#f06" />
    <!--x表示横坐标，y表示纵坐标，width表示宽，height表示高-->
</svg>

效果图如下：
在这里插入图片描述

viewBox是svg标签中的一个属性，它允许指定一个给定的一组图形伸展以适应特定的容器元素。

viewBox属性的值是一个包含4个参数的列表 min-x,

关注