关于SVG的viewBox

最新推荐文章于 2024-09-08 21:10:04 发布
最新推荐文章于 2024-09-08 21:10:04 发布
阅读量1w 收藏 2
点赞数 3
分类专栏： svg 文章标签： 测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/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的图像。
（以上为本人测试心得，如有异议，请留言，谢谢）

SVG viewport viewBox preserveAspectRatio (2)
https://shixuebin.gitee.io/hexo-blog/
01-25 352
一般的笛卡尔坐标系中，x=0,y=0坐标点在在图标的左下角。随着x的增加，点在坐标系中向右移动。随着x的减小，点在坐标系中向左移动。随着y增加，点在坐标系中向上移动。随着y减小，点在坐标系中向下移动。
SVG View Box 深度解析
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-31 1172
希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，可以用来创建高质量的可缩放图形。因此，原本200x200的内容会被缩小以适应100x100的容器。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，同样设为100x100。的左上角坐标设置为负数，我们可以将SVG内容向画布中心移动。这里我们定义了一个100x100的SVG画布，
SVG的viewBox
Meskjei的博客
06-24 3370
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
sclxf的专栏
09-15 4950
SVG:viewBox是SVG的虚坐标系,比VML的简单不少。为根节点svg元素加上viewBox属性后,在svg下的各图形元素的大小和位置都是按viewBox限定的坐标,而不是页面的实际坐标。如: 在100x100的svg区域中,放入一个200x200的方块,按理不能正常显示,会被裁去一部分。但是因为加入了viewBox属性,svg区域会完整显示rec
一图说明svg的viewBox属性
weixin_42715889的博客
12-26 892
【代码】一图说明svg的viewBox属性。
12. SVG 的viewBox属性详解
一名全栈开发工程师
05-14 2016
当SVG元素的视窗（viewport）和viewBox的宽高比不匹配时，SVG内容应如何缩放和对齐。属性可以接受多种不同的值，每个值都会影响SVG内容的缩放和对齐方式。这个属性的值由两部分组成：对齐方式和缩放行为。第一个参数是必须的第二个是可选的。
svg 学习记录之 viewBox 属性
阿臻
08-22 2483
首先可以想象 svg 标签是一个屏幕, viewBox 是一个截屏窗口大小, 而 rect 是截取窗口里面的内容, 当你截屏完成后, 你要把这个截取的图片放在一个名为 svg 的屏幕上, 这时候如果 viewBox 小于舞台大小, 那就要放大截图来铺满 svg, 如果 viewBox 大于 svg 的尺寸那就要缩小截图来达到铺满 svg 舞台。有 viewBox 的效果 , 现在的 viewBox 是远小区 svg 的宽高。有 viewBox 的效果 , 现在的 viewBox 是远大于 svg的宽高。
svg中viewBox理解
m0_38081413的博客
03-28 2042
一般的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
natsu-cc的博客
03-25 1828
viewPort 表示SVG可见区域的大小，或者可以想象成舞台大小，画布大小。 <svg width="500" height="300"></svg> 在SVG中，值可以带单位也不可以不带。一个不带单位的值可以在用户空间中通过用户单位声明。如果值通过用户单位声明，那么这个值的数值被认为和px单位的数值一样。这意味着上述例子将被渲染为500px*300px的视窗。 你也可以使用单位来声明值。SVG支持的长度单位有：em，ex，px，pt，pc，cm，mm，in和百分比。 Vie
SVG ViewBox
牧灵泉的崖巢
08-06 1万+
如果svg图形太大或者太小，就可以用ViewBox属性来调整。
svg viewBox
xm_law的博客
08-28 612
viewBox可以为视口指定用户坐标 例如：要在4厘米X5厘米的图纸上设置一个每厘米16个单位的坐标系统，要使用这个开始标记：viewBox(0 0 416 516),它分别代表想要叠加在视口上的用户坐标系统的最小x坐标，最小y坐标，宽度和高度，后者数值越大图像会缩放得越小 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http:/...
svg中viewbox图解分析
月来better
05-25 1576
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 404
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 标签的 viewBox属性（超详细）
懒羊羊大王的博客
08-15 3994
相信小伙伴们在学习svg标签的viewBox属性时候，无论是看w3cschool还是MDN的官方文档，都是一头雾水。我当时也是尝尽了苦头，绕了很大的弯子才弄懂其中的奥秘。下面我将我的探究成果分享给大家。
理解SVG的viewport,viewBox,preserveAspectRatio
weixin_33701564的博客
06-30 374
viewport 表示SVG可见区域的大小，或者可以想象成舞台大小，画布大小。 <svg width="500" height="300"></svg> 上面的SVG代码定义了一个视区，宽500单位，高300单位。 注意这里的措辞是“单位”，不是“像素”。虽然说，width/height如果是纯数字，使用的就是“像素”作为单位的。 也就是说，上面SVG的视...
svg的 viewBox理解
weixin_34204722的博客
06-07 321
<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...
svg view-box 学习笔记
黄彪博客
01-14 555
文章目录文章参考什么是世界、视野、视窗世界视窗视野（viewBox）视野和视窗的关系视野和视窗尺寸一样（比例是1:1）视野和市场的大小不一致`viewbox 和 视窗 高宽等比``viewbox 和 视窗 高宽不等比` 文章参考 svg: viewport,viewBox,preserveAspectRatio缩放 SVG的viewBox与preserveAspectRatio属性 什么是世界...
一文搞懂SVG的`viewBox`属性
最新发布
qq_43806699的博客
09-08 4462
本文详细解释svg的viewBox属性
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值