SVG的viewBox、width和height释义, 示例及代码

news2025/1/16 19:54:21

svg的是没有边界的,svg画布只是用于展示svg世界中某一个范围的内容,而对于超过了svg画布范围的内容,则会被遮挡。默认svg画布默认显示世界坐标下原点坐标的width*height面积的矩形视野。
在这里插入图片描述

​ 我们可以通过viewBox来修改默认的显示配置,viewBox由4个点组成,viewBox=“x, y, w, h”;其中x,y就是用于定义svg画布在世界坐标下的位置,通过修改x,y可以移动画布在世界坐标下的位置。而w,h则是定义svg画布的视野区域;默认情况下viewBox=“0,0,width,height”

当w<width、h<height的时候,相当于是拉近了视野,视野小了,但实际显示的区域没有发生变化;这就会导致显示的图形变大,显示的区域变小。
当w>width、h>height的时候,相当于拉远了视野,视野变大了,但实际显示的区域没有发生变化;这就会导致显示的图形变小,显示的区域变大。

效果图
在这里插入图片描述

源代码

							<!DOCTYPE html>
<html>
<body>
<svg width="200" height="200" viewBox="0 0 3000 3000" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%"/>
  <circle cx="50%" cy="50%" r="40" fill="white"/>
</svg>
	
<svg width="200" height="200" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%"/>
  <circle cx="50%" cy="50%" r="40" fill="white"/>
</svg>	
<svg width="200" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%"/>
  <circle cx="50%" cy="50%" r="40" fill="white"/>
</svg>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1225286.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

组合模式 rust和java的实现

文章目录 组合模式介绍实现javarsut 组合模式 组合模式&#xff08;Composite Pattern&#xff09;&#xff0c;又叫部分整体模式&#xff0c;是用于把一组相似的对象当作一个单一的对象。组合模式依据树形结构来组合对象&#xff0c;用来表示部分以及整体层次。这种类型的设计…

Flutter笔记:桌面端应用多窗口管理方案

Flutter笔记 桌面端应用多窗口管理方案 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/details/134468587 【简介…

python算法例10 整数转换为罗马数字

1. 问题描述 给定一个整数&#xff0c;将其转换为罗马数字&#xff0c;要求返回结果的取值范围为1~3999。 2. 问题示例 4→Ⅳ&#xff0c;12→Ⅻ&#xff0c;21→XⅪ&#xff0c;99→XCIX。 3. 代码实现 def int_to_roman(num):val [1000, 900, 500, 400,100, 90, 50, 40…

vue项目中使用vant轮播图组件(桌面端)

一. 内容简介 vue使用vant轮播图组件(桌面端) 二. 软件环境 2.1 Visual Studio Code 1.75.0 2.2 chrome浏览器 2.3 node v18.14.0 三.主要流程 3.1 安装环境 3.2 添加代码 3.3 结果展示 四.具体步骤 4.1 安装环境 先安装包 # Vue 3 项目&#xff0c;安装最新版 Va…

Linux进程——exec族函数、exec族函数与fork函数的配合

exec族函数解析 作用 我们用fork函数创建新进程后&#xff0c;经常会在新进程中调用exec函数去执行另外一个程序。当进程调用exec函数时&#xff0c;该进程被完全替换为新程序。因为调用exec函数并不创建新进程&#xff0c;所以前后进程的ID并没有改变。 功能 在调用进程内部…

【Web】Ctfshow SSRF刷题记录1

核心代码解读 <?php $url$_POST[url]; $chcurl_init($url); curl_setopt($ch, CURLOPT_HEADER, 0); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $resultcurl_exec($ch); curl_close($ch); ?> curl_init()&#xff1a;初始curl会话 curl_setopt()&#xff1a;会…

QCheckBox样式表

1、QCheckBox选择器和指示器类型 选择器类型描述QCheckBoxQCheckBox 的默认选择器。QCheckBox::indicatorQCheckBox 的指示器,即复选框的标记部分。QCheckBox::indicator:checkedQCheckBox 选中状态下的指示器。QCheckBox::indicator:uncheckedQCheckBox 未选中状态下的指示器…

神辅助 Cursor 编辑器,加入 GPT-4 让编码更轻松!

分类 互联网 在 ChatGPT 问世之前&#xff0c;我们的编码方式很多时候都是面向搜索引擎编码&#xff0c;需要不断地进行搜索&#xff0c;然后复制粘贴&#xff0c;俗称复制粘贴工程师。 但是&#xff0c;随着ChatGPT的出现&#xff0c;这一切将彻底改变。 ChatGPT 是一种基于…

【漏洞复现】通达oa 前台sql注入

漏洞描述 通达OA(Office Automation)是一款企业级协同办公软件,旨在为企业提供高效、便捷、安全、可控的办公环境。它涵盖了企业日常办公所需的各项功能,包括人事管理、财务管理、采购管理、销售管理、库存管理、生产管理、办公自动化等。通达OA支持PC端和移动端使用,可以…

操作系统(五)| 文件系统上 结构 存取方式 文件目录 检索

文章目录 1 文件系统概述2 文件的结构与存取方式2.1 磁盘2.2 文件的物理结构2.2.1 连续结构2.2.2 链式结构2.2.3 索引结构 2.3 文件的存取方式 3 文件目录3.1 基本概念3.2 目录结构单级目录结构多级目录结构 3.3 文件目录检索3.3.1 目录检索文件寻址 3.4 文件目录的实现 1 文件…

CAS源码工程搭建记录

CAS源码工程搭建 1.下载2.gradle下载源改为阿里云&#xff0c;解决下载慢的问题3.解决保存 1.下载 git clone -b 5.3.x https://gitee.com/mirrors/CAS.git如果下载的是压缩包&#xff0c;导入工程会保存&#xff0c;因为builder.gradle的第20行开始有取git信息&#xff0c;如…

为关键信息基础设施安全助力!持安科技加入关保联盟

近日&#xff0c;中关村华安关键信息基础设施安全保护联盟发布了其新一批的会员单位&#xff0c;零信任办公安全代表企业持安科技成功加入&#xff0c;与联盟企业共同为关键信息基础设施提供各类支撑和保障。 中关村华安关键信息基础设施安全保护联盟由北京市科学技术委员会、中…

数据结构初阶leetcodeOJ题(二)

目录 第一题 思路&#xff1a; 第二题 思路 第三题 描述 示例1 思路 总结&#xff1a;这种类似的题&#xff0c;都是用快慢指针&#xff0c;相差一定的距离然后输出慢指针。 第一题 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val…

【vue实战项目】通用管理系统:首页

前言 本文为博主的vue实战小项目系列中的第三篇&#xff0c;很适合后端或者才入门的小伙伴看&#xff0c;一个前端项目从0到1的保姆级教学。前面的内容&#xff1a; 【vue实战项目】通用管理系统&#xff1a;登录页-CSDN博客 【vue实战项目】通用管理系统&#xff1a;封装to…

为什么软件公司很少用Python开发Web项目?

实际上&#xff0c;Python在Web开发方面有着广泛的应用&#xff0c;许多软件公司也确实使用Python来开发Web项目。 Python拥有诸如Django、Flask等流行的Web框架&#xff0c;这些框架使得开发者能够迅速、高效地开发出Web应用。 然而&#xff0c;Python在Web开发中的使用可能会…

C_12练习题

一、单项选择题(本大题共20小题,每小题2分&#xff0c;共40分。在每小题给出的四个备选项中&#xff0c;选出一个正确的答案&#xff0c;并将所选项前的字母填写在答题纸的相应位置上。) C 风格的注释&#xff0c;也称块注释或多行注释&#xff0c;以&#xff08;&#xff09;…

基于STM32的多组外部中断(EXTI)的优化策略与应用

在某些嵌入式应用中&#xff0c;可能需要同时处理多个外部中断事件。STM32系列微控制器提供了多组外部中断线&#xff08;EXTI Line&#xff09;&#xff0c;可以同时配置和使用多个GPIO引脚作为外部中断触发器。为了有效管理和处理多组外部中断&#xff0c;我们可以采取一些优…

[CISCN 2023 初赛]ezbyte

从字符串找到%100s&#xff0c;发现下面有个yes 跟踪yes 、 yes之前有个jmp 看上面的代码&#xff0c;要想跳转到含有yes这一块&#xff0c;需要r13等于r12 xor r13&#xff0c;r13说明r13是0&#xff0c;但是找不到r12的操作代码 实际着这个关键的操作r12的加密逻辑&…

STM32外部中断(EXTI)与RTOS多任务处理的协同设计

当在STM32上使用外部中断&#xff08;EXTI&#xff09;与RTOS&#xff08;Real-Time Operating System&#xff0c;实时操作系统&#xff09;进行多任务处理时&#xff0c;需要设计合适的协同机制&#xff0c;以确保可靠的中断处理和任务调度。在下面的概述中&#xff0c;我将介…