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

nodejs42 (UI相关) : svg的viewBox属性

svg原始的width和height属性

  • svg原始的width 和 height控制画布的大小,确定了图形能显示的最大范围。 viewBox 控制图形在画布中的位置和相对大小。

  • 当不设置viewBox时,SVG内容会以其自身的尺寸(以像素为单位)进行渲染,这通常意味着1个用户单位等同于1个像素。例如,如果有一个<svg width="100" height="100">但没有指定viewBox,那么这个SVG画布将是100x100像素,并且在这个SVG内部使用的任何坐标都将基于这一设定,即(0, 0)位于左上角,而(100, 100)则对应右下角。

  • 不设置viewbox时,只增大图形的长和宽不能放大图形,只会放大画布

svg的viewBox属性

viewBox 是 SVG (Scalable Vector Graphics) 中非常重要的一个属性,它定义了一个坐标系统,决定了SVG图形的显示区域,将视图窗口的内容填充到整个画布viewBox 属性有四个值,通常以以下格式书写:

viewBox="min-x min-y width height"
  • min-x:视图框的左上角 x 坐标,决定了起始的水平位置。
  • min-y:视图框的左上角 y 坐标,决定了起始的垂直位置。
  • width:视图框的宽度,表示图形的可视区域的水平尺寸。
  • height:视图框的高度,表示图形的可视区域的垂直尺寸。

示例

<svg width="400" height="400">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
  • 将原来左上角的图像作为视图窗口
<svg viewBox="0 0 100 100"  width="400" height="400">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

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

相关文章:

  • Mamba组件:状态空间模型简介
  • MySQL开发陷阱与最佳实践:第1章:MySQL开发基础概述-1.2 MySQL开发环境搭建
  • HarmonyOS NEXT - 网络请求问题(http)
  • FLASK和GPU依赖安装
  • Linux驱动开发框架基础——新旧字符设备驱动笔记整理(1)
  • 软考中级设计模式实战宝典:核心意图解析+适用场景+完整源码下载+高频题库
  • 如何在AVL树中高效插入并保持平衡:一步步掌握旋转与平衡因子 —— 平衡因子以及AVL结构篇
  • 【mysql】centOS7安装mysql详细操作步骤!—通过tar包方式
  • 机器人技能列表
  • 通过特征值和特征向量实现的图像压缩和特征提取
  • 大模型训练全流程深度解析
  • 力扣-单调栈-739 每日温度
  • spring-aop笔记
  • 2023 年全国职业院校技能大赛(中职组)移动应用与开发赛项 赛题第十套
  • Python基础入门掌握(九)
  • 设计签到 用redis 和 MySQL
  • 目标检测中衡量模型速度和精度的指标:FPS和mAP
  • 软件测试之测试覆盖率
  • c++三级(枚举问题)
  • 普通enum和enum class的区别