一图说明svg的viewBox属性

狼火233

于 2023-12-26 19:35:16 发布

阅读量644

点赞数 5

分类专栏：前端文章标签： html html5 前端

本文链接：https://blog.csdn.net/weixin_42715889/article/details/135229445

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

SVG的viewBox属性

viewBox=“x, y, width, height”

等比例：略

说明：略

举例

代码

<svg width="300" height="300" viewBox="150, 150, 150, 150" fill="skyblue"
     style="border:5px solid red">
    <circle r="150" cx="150" cy="150"/>
</svg>

结果

非等比例

说明
- 定位：根据参数中的 x 和 y 定位起点
- 截取：根据参数中的 width 和 height 截取初始的矩形图像
- 拓展：根据参数中的 width 和 height 比，按比例进行拓展
- 平铺：将拓展后的图像等比放大缩小到相框中

请添加图片描述

举例

代码

<svg width="300" height="300" viewBox="0, 0, 150, 75" fill="skyblue"
     style="border:5px solid red">
    <circle r="150" cx="150" cy="150"/>
</svg>
<svg width="300" height="300" viewBox="0, 0, 450, 600" fill="skyblue"
     style="border:5px solid blue">
    <circle r="150" cx="150" cy="150"/>
</svg>
<svg width="300" height="150" viewBox="225, 225, 25, 150" fill="skyblue"
     style="border:5px solid green">
    <circle r="150" cx="150" cy="150"/>
</svg>