SVG的viewBox与放缩

最新推荐文章于 2024-05-14 10:56:03 发布
最新推荐文章于 2024-05-14 10:56:03 发布
阅读量3.9k 收藏
点赞数 1
分类专栏： jQuery 第三方库 文章标签： SVG 放缩
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fyyyr/article/details/79362988
版权

SVG的viewBox用于划定可视区域的大小。

要对SVG对象进行缩放，必须设定viewBox的大小，通常设为与SVG对象大小相同。

设定viewBox大小后，再设置svgDoc的大小，即可对SVG的显示进行整体放缩。

超频化石鱼
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入解析HTML5使用SVG图像时的viewBox属性用法
09-28
- 当viewBox的宽高比与SVG视窗的宽高比不一致时，可能会导致内容溢出。这可以通过设置`preserveAspectRatio`属性来调整，但这里我们仅讨论基本的viewBox用法。 **5. 示例** 假设我们有以下SVG图像，我们希望在小...
svg的viewBox、width和height的设置说明
大剑师兰特的GIS世界
05-26 3301
其中x，y就是用于定义svg画布在世界坐标下的位置，通过修改x，y可以移动画布在世界坐标下的位置。svg的是没有边界的，svg画布只是用于展示svg世界中某一个范围的内容，而对于超过了svg画布范围的内容，则会被遮挡。当wheight的时候，相当于拉远了视野，视野变大了，但实际显示的区域没有发生变化；这就会导致显示的图形变小，显示的区域变大。
svg 学习记录之 viewBox 属性
weixin_43191327的博客
08-22 2384
首先可以想象 svg 标签是一个屏幕, viewBox 是一个截屏窗口大小, 而 rect 是截取窗口里面的内容, 当你截屏完成后, 你要把这个截取的图片放在一个名为 svg 的屏幕上, 这时候如果 viewBox 小于舞台大小, 那就要放大截图来铺满 svg, 如果 viewBox 大于 svg 的尺寸那就要缩小截图来达到铺满 svg 舞台。有 viewBox 的效果 , 现在的 viewBox 是远小区 svg 的宽高。有 viewBox 的效果 , 现在的 viewBox 是远大于 svg的宽高。
12. SVG 的viewBox属性详解
最新发布
一名全栈开发工程师
05-14 1368
当SVG元素的视窗（viewport）和viewBox的宽高比不匹配时，SVG内容应如何缩放和对齐。属性可以接受多种不同的值，每个值都会影响SVG内容的缩放和对齐方式。这个属性的值由两部分组成：对齐方式和缩放行为。第一个参数是必须的第二个是可选的。
简介svg的核心能力——矢量缩放
zhengsr12345的博客
02-12 2074
简介svg的核心功能矢量缩放。
svg之ViewBox详解,秒懂SVG里的viewbox
热门推荐
zp19860529的博客
02-27 2万+
今天学 SVG 的时候看到了 viewbox 属性，先来看一下svg的格式： <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="layer1" xmlns="http://www.w3.org/2000/svg" .
数据可视化开发之svg知识入门
m0_57307213的博客
02-15 1217
svg学习
SVG编辑器 Qt加C++实现，可放缩的矢量图形编辑器
08-23
SVG编辑器 Qt加C++实现，可放缩的矢量图形编辑器
svg与js交互
05-18
svg与js交互,主要讲解svg与js的交互,svg与js交互,主要讲解svg与js的交互
261833090154878_SVGsimulink_SVG仿真_SVG仿真与比对_
10-03
SVG功能实现与比较，使用Matlab/Simulink仿真平台作为
一图说明svg的viewBox属性
weixin_42715889的博客
12-26 756
【代码】一图说明svg的viewBox属性。
记一次web中对svg图形拖动和缩放卡顿的性能优化(基于svg.js) - viewbox vs transform
云帆的博客
03-11 7766
前言 在web中对svg图形的操作，我使用svg.js库挺久的了，对svg图形的拖动缩放我一直用的衍生插件svg.panzoom.js svg.panzoom库对svg拖拽缩放的实现是对viewBox的设置来进行缩放的，至于使用viewBox来缩放、拖拽的原理，建议各位百度了解一下，不细说了（以后有空可以讲解一下） 最近使用这个库拖拽svg发现了一个比较严重的性能问题（其实之前一个项目就发现了，不过当时没有这么卡顿且需求是只用同时预览一张图即可），对性能没有太大要求，便没有多管，现在这个项目是多tab页
SVG的viewBox、width和height释义, 示例及代码
大赚万万亿
12-21 339
其中x，y就是用于定义svg画布在世界坐标下的位置，通过修改x，y可以移动画布在世界坐标下的位置。svg的是没有边界的，svg画布只是用于展示svg世界中某一个范围的内容，而对于超过了svg画布范围的内容，则会被遮挡。当wheight的时候，相当于拉远了视野，视野变大了，但实际显示的区域没有发生变化；这就会导致显示的图形变小，显示的区域变大。
svg绘(viewBox viewport preserveAspectRatio)代替png图片等
weixin_45441173的博客
01-15 458
svg绘(viewBox viewport preserveAspectRatio)代替png图片等
svg 进阶
weixin_47121832的博客
02-09 1112
viewBox表示svg的绘制坐标系默认值取viewport svg的viewBox是怎么计算的呢 就是拿viewport 中的x和y除viewBox的x和y得到一个比值然后拿着这个比值去等比的缩放或者放大svg的宽高。preserveAspectRatio 是一个较难理解的概念，它相当于在 viewport 内部绘制了一个虚拟内框，它的默认值为：xMidYMid meet。meet 模式下，svg 将优先采纳压缩比较小的作为最终压缩比，meet 是默认参数。viewport 是 svg 图像的可见区域。
svg中viewBox理解
m0_38081413的博客
03-28 1918
一般的svg中都会设置viewBox属性，有时候总是觉得这个值的设置和理解的不一样，近日，看svg精髓，总算是理解了，现在，将理解的要点记录如下： 比如以下一段svg代码 <svg width="30" height="80" viewBox="0 0 50 50"> <circle cx="25" cy="25" r="25" style="stroke:black;fill:none"/> </svg> 上面代码设置svg画布的宽高分别为30和80，而viewBo
SVG的viewBox
Meskjei的博客
06-24 3223
SVG中有个viewBox的概念。而要解释这个概念，则需看一个例子。 <svg height="800" width="600" viewBox="0 0 60 80" style="border:1px solid #ff0000"> <rect height="40" width="30" fill="#abcdef"/> </svg> 首先是s...
svg之ViewBox详解
子非渔
03-20 1万+
先来看一下svg的格式： <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="layer1" xmlns="...
svg viewBox
07-27
回答: SVG的viewBox属性用于定义SVG元素的可见区域和坐标系。它是一个矩形框，由四个值组成，分别表示x、y、width和height。\[1\]在引用\[1\]中的例子中，viewBox的值是"0 0 200 200"，表示可见区域的左上角坐标为(0, 0)，宽度为200，高度为200。而在引用\[2\]中的例子中，viewBox的值是"105 55 60 60"，表示可见区域的左上角坐标为(105, 55)，宽度为60，高度为60。\[2\]在使用viewBox属性时，需要设置四个值，分别表示可见区域的左上角坐标和宽度、高度。例如，<svg width="200" height="200" viewbox="0 0 100 100"></svg>中的viewBox属性值是"0 0 100 100"，表示可见区域的左上角坐标为(0, 0)，宽度为100，高度为100。\[3\] #### 引用[.reference_title] - *1* *3* [svg之ViewBox详解,秒懂SVG里的viewbox](https://blog.csdn.net/zp19860529/article/details/114173594)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [svg中viewbox图解分析](https://blog.csdn.net/Kiruthika/article/details/124974340)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值