关于SVG的viewBox

最新推荐文章于 2024-05-24 20:40:38 发布
最新推荐文章于 2024-05-24 20:40:38 发布
阅读量1w 收藏 2
点赞数 3
分类专栏： svg 文章标签： 测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/doop1120/article/details/6322229
版权

关于viewBox的意思在网上找了好多，均不得其解，后自己测试，得出如下结论：
<svg width="1000" height="1000" viewBox="100 100 400 400">
上面这个svg标签的意思是，svg宽为1000，高为1000，viewBox里的4个数字的意思是：把svg的左上角100，100和右下角400，400区域内的图像放入1000，1000内，
也就是把本来宽为400-100=300，高为400-100=300的长方形，放入宽高均为1000的长方形内，也就是说等比例的把高宽为300的放大为高宽为1000的图像。
（以上为本人测试心得，如有异议，请留言，谢谢）

Eclipse_80
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
SVG的viewBox
Meskjei的博客
06-24 3232
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常用属性及动画效果
jieyucx的博客
10-20 3196
SVG是可缩放矢量图形（）的缩写。它是一种基于XML语法的2D矢量图形格式，用于描述二维图形和图像。与传统的栅格图像（如JPEGPNG等）相比，SVG使用数学描述来定义图形，因此可以无损地缩放和放大，而不会失真或失去清晰度。SVG可在各种分辨率和尺寸的设备上显示，并且支持交互性和动画效果，使得它成为一种非常强大和灵活的图形格式。viewBox是SVG元素的一个属性，用于定义SVG画布中可见区域的坐标系和大小。它是一个由4个数值组成的字符串，分别表示左上角的x坐标、左上角的y坐标、宽度和高度。viewBox。
前端基础入门三大核心之HTML篇 —— SVG的viewBox、width和height：绘制矢量图的魔法比例尺【含代码示例】
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-24 1354
SVG的viewBox、width和height，这三位魔法师联手，为我们的网页施加了适应性强、清晰度高的视觉魔法。掌握了它们的秘诀，无论是响应式设计还是高清大屏展示，都将游刃有余。在你的项目中，是否遇到过SVG缩放的有趣挑战？或是有独到的使用技巧？欢迎在评论区分享你的故事，让我们一起探索SVG的无限可能，让魔法更加绚烂多彩！欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。
svg viewbox
sclxf的专栏
09-15 4916
SVG:viewBox是SVG的虚坐标系,比VML的简单不少。为根节点svg元素加上viewBox属性后,在svg下的各图形元素的大小和位置都是按viewBox限定的坐标,而不是页面的实际坐标。如: 在100x100的svg区域中,放入一个200x200的方块,按理不能正常显示,会被裁去一部分。但是因为加入了viewBox属性,svg区域会完整显示rec
一图说明svg的viewBox属性
weixin_42715889的博客
12-26 780
【代码】一图说明svg的viewBox属性。
12. SVG 的viewBox属性详解
一名全栈开发工程师
05-14 1721
当SVG元素的视窗（viewport）和viewBox的宽高比不匹配时，SVG内容应如何缩放和对齐。属性可以接受多种不同的值，每个值都会影响SVG内容的缩放和对齐方式。这个属性的值由两部分组成：对齐方式和缩放行为。第一个参数是必须的第二个是可选的。
svg 学习记录之 viewBox 属性
阿臻
08-22 2411
首先可以想象 svg 标签是一个屏幕, viewBox 是一个截屏窗口大小, 而 rect 是截取窗口里面的内容, 当你截屏完成后, 你要把这个截取的图片放在一个名为 svg 的屏幕上, 这时候如果 viewBox 小于舞台大小, 那就要放大截图来铺满 svg, 如果 viewBox 大于 svg 的尺寸那就要缩小截图来达到铺满 svg 舞台。有 viewBox 的效果 , 现在的 viewBox 是远小区 svg 的宽高。有 viewBox 的效果 , 现在的 viewBox 是远大于 svg的宽高。
深入解析HTML5使用SVG图像时的viewBox属性用法
09-28
viewBox属性是SVG的一个关键特性，它为SVG图像提供了更灵活的布局和响应式设计能力。下面我们将详细探讨viewBox的工作原理和如何使用它来裁剪SVG图像，以适应不同的屏幕尺寸。 **1. viewBox属性的基本概念** ...
babel-plugin-inline-svg：Babel插件以优化和内嵌svg
01-31
svg width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><title>home</title><path d="M37.6 24.104l-4.145-4.186v-6.389h-3.93v2.416L26.05 12.43a1.456 1.456 0 0...
关于svg事件及缩放
11-22
更多关于SVG事件的信息可以参考W3C官方文档：[http://www.w3.org/TR/SVG/interact.html](http://www.w3.org/TR/SVG/interact.html) 需要注意的是，在某些情况下可能会有多个事件同时触发。在这种情况下，事件的执行...
Webpack实战加载SVG的方法
08-28
<svg viewBox="0 0 24 24" stroke="#000"> </svg> ``` 加载 SVG 可以使用多种方法，包括使用 file-loader、url-loader、raw-loader 和 svg-inline-loader 等，每种方法都有其优缺，选择哪种方法取决于实际情况。
SVG ViewBox
牧灵泉的崖巢
08-06 1万+
如果svg图形太大或者太小，就可以用ViewBox属性来调整。
svg viewBox
xm_law的博客
08-28 512
viewBox可以为视口指定用户坐标 例如：要在4厘米X5厘米的图纸上设置一个每厘米16个单位的坐标系统，要使用这个开始标记：viewBox(0 0 416 516),它分别代表想要叠加在视口上的用户坐标系统的最小x坐标，最小y坐标，宽度和高度，后者数值越大图像会缩放得越小 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http:/...
svg中viewBox理解
m0_38081413的博客
03-28 1946
一般的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图解分析
月来better
05-25 1497
svg中有一个viewbox属性，中文翻译为视区，就是在svg上截取一小块，放大到整个svg显示。 这个属性初学的话有点难以理解，这边做一个简单的示例，一看就明白了。 1）先来一个svg，宽高各位300，设置一下边框： <svg width="300" height="300" style="border: 1px solid steelblue"> </svg> 运行效果： 这边其实就是一个300*300的矩形。 2）svg里面画一个矩形： <svg width="30.
svg viewbox_了解SVG viewBox
cungui5726的博客
08-24 366
svg viewboxThe viewBox attribute is one of the first encountered by those new to SVG, and potentially one of the most confusing. While it has been covered by others in the past - Sara Soueidan’s long...
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的viewport,viewBox,preserveAspectRatio
weixin_33701564的博客
06-30 328
viewport 表示SVG可见区域的大小，或者可以想象成舞台大小，画布大小。 <svg width="500" height="300"></svg> 上面的SVG代码定义了一个视区，宽500单位，高300单位。 注意这里的措辞是“单位”，不是“像素”。虽然说，width/height如果是纯数字，使用的就是“像素”作为单位的。 也就是说，上面SVG的视...
svg的 viewBox理解
weixin_34204722的博客
06-07 255
<svg id="ps4" width="400" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 894.7 4...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值