SVG的viewBox

最新推荐文章于 2024-08-15 01:14:41 发布
最新推荐文章于 2024-08-15 01:14:41 发布
阅读量3.2k 收藏 6
点赞数 4
分类专栏： 前端 文章标签： 前端 SVG viewBox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hjc256/article/details/93484753
版权
SVG的viewBox属性定义了图形的视区，它指定图形的坐标系统和缩放比例。viewBox由四个数值组成，分别是左上角横坐标、左上角纵坐标、宽度和高度。设置viewBox会使图形内容按比例填充到画布区域，即使图形原始尺寸小于画布，也会被拉伸至全屏。例如，一个viewBox为`0 0 600 400`的SVG，在一个1200px x 600px的画布上，图形的每个单位将被拉伸20倍，从而实际宽高为600px x 400px。
摘要由CSDN通过智能技术生成

SVG中有个viewBox的概念。而要解释这个概念，则需看一个例子。

image

<svg height="800" width="600" viewBox="0 0 60 80" style="border:1px solid #ff0000">
最低0.47元/天 解锁文章
Meskjei
关注
专栏目录
svg中viewBox理解
m0_38081413的博客
03-28 1969
一般的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
sclxf的专栏
09-15 4921
SVG:viewBox是SVG的虚坐标系,比VML的简单不少。为根节点svg元素加上viewBox属性后,在svg下的各图形元素的大小和位置都是按viewBox限定的坐标,而不是页面的实际坐标。如: 在100x100的svg区域中,放入一个200x200的方块,按理不能正常显示,会被裁去一部分。但是因为加入了viewBox属性,svg区域会完整显示rec
深入解析SVG 标签的 viewBox属性（超详细）
最新发布
懒羊羊大王的博客
08-15 1789
相信小伙伴们在学习svg标签的viewBox属性时候，无论是看w3cschool还是MDN的官方文档，都是一头雾水。我当时也是尝尽了苦头，绕了很大的弯子才弄懂其中的奥秘。下面我将我的探究成果分享给大家。
12. SVG 的viewBox属性详解
一名全栈开发工程师
05-14 1802
当SVG元素的视窗（viewport）和viewBox的宽高比不匹配时，SVG内容应如何缩放和对齐。属性可以接受多种不同的值，每个值都会影响SVG内容的缩放和对齐方式。这个属性的值由两部分组成：对齐方式和缩放行为。第一个参数是必须的第二个是可选的。
SVG ViewBox
牧灵泉的崖巢
08-06 1万+
如果svg图形太大或者太小，就可以用ViewBox属性来调整。
关于SVG的viewBox
doop1120的专栏
04-14 1万+
svg viewBox
svg viewBox
07-27
回答: SVG的viewBox属性用于定义SVG元素的可见区域和坐标系。它是一个矩形框，由四个值组成，分别表示x、y、width和height。\[1\]在引用\[1\]中的例子中，viewBox的值是"0 0 200 200"，表示可见区域的左上角坐标为(0...
SVG进阶-理解viewBox
natsu-cc的博客
03-25 1756
viewPort 表示SVG可见区域的大小，或者可以想象成舞台大小，画布大小。 <svg width="500" height="300"></svg> 在SVG中，值可以带单位也不可以不带。一个不带单位的值可以在用户空间中通过用户单位声明。如果值通过用户单位声明，那么这个值的数值被认为和px单位的数值一样。这意味着上述例子将被渲染为500px*300px的视窗。 你也可以使用单位来声明值。SVG支持的长度单位有：em，ex，px，pt，pc，cm，mm，in和百分比。 Vie
svg之ViewBox详解,秒懂SVG里的viewbox
热门推荐
zp19860529的博客
02-27 3万+
今天学 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 viewbox_了解SVG viewBox
cungui5726的博客
08-24 371
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 View Box 深度解析
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-31 887
希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，可以用来创建高质量的可缩放图形。因此，原本200x200的内容会被缩小以适应100x100的容器。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，同样设为100x100。的左上角坐标设置为负数，我们可以将SVG内容向画布中心移动。这里我们定义了一个100x100的SVG画布，
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 view-box 学习笔记
黄彪博客
01-14 490
文章目录文章参考什么是世界、视野、视窗世界视窗视野（viewBox）视野和视窗的关系视野和视窗尺寸一样（比例是1:1）视野和市场的大小不一致`viewbox 和 视窗 高宽等比``viewbox 和 视窗 高宽不等比` 文章参考 svg: viewport,viewBox,preserveAspectRatio缩放 SVG的viewBox与preserveAspectRatio属性 什么是世界...
一图说明svg的viewBox属性
weixin_42715889的博客
12-26 801
【代码】一图说明svg的viewBox属性。
svg中viewbox图解分析
月来better
05-25 1521
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.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值