svg中viewBox理解

已于 2022-03-28 15:12:17 修改
阅读量1.9k 收藏 7
点赞数 1
分类专栏： svg 文章标签： html
于 2022-03-28 11:31:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_38081413/article/details/123790659
版权

一般的svg中都会设置viewBox属性，有时候总是觉得这个值的设置和理解的不一样，近日，看svg精髓，总算是理解了，现在，将理解的要点记录如下：
比如以下一段svg代码

<svg width="30" height="80" viewBox="0 0 50 50"
最低0.47元/天 解锁文章
遇见y2021
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SVG之线条动画相关
玉案轩窗的博客
06-12 1910
前言 最近在实现VUI库的基础组件progress，其中涉及到圆形进度相关的绘制，参考了element ui框架的实现发现是通过svg来实现的。 实际上自身之前对于svg仅仅是知道的水平，本文旨在提交自身对于svg路径path以及动画相关内容的了解。 本文内容主要分为三块： viewBox属性 svg路径path相关知识学习 stroke-dasharray和stroke-dashoffset属...
svg 学习记录之 viewBox 属性
weixin_43191327的博客
08-22 2395
首先可以想象 svg 标签是一个屏幕, viewBox 是一个截屏窗口大小, 而 rect 是截取窗口里面的内容, 当你截屏完成后, 你要把这个截取的图片放在一个名为 svg 的屏幕上, 这时候如果 viewBox 小于舞台大小, 那就要放大截图来铺满 svg, 如果 viewBox 大于 svg 的尺寸那就要缩小截图来达到铺满 svg 舞台。有 viewBox 的效果 , 现在的 viewBox 是远小区 svg 的宽高。有 viewBox 的效果 , 现在的 viewBox 是远大于 svg的宽高。
前端基础入门三大核心之HTML篇 —— SVG的viewBox、width和height：绘制矢量图的魔法比例尺【含代码示例】
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-24 1278
SVG的viewBox、width和height，这三位魔法师联手，为我们的网页施加了适应性强、清晰度高的视觉魔法。掌握了它们的秘诀，无论是响应式设计还是高清大屏展示，都将游刃有余。在你的项目中，是否遇到过SVG缩放的有趣挑战？或是有独到的使用技巧？欢迎在评论区分享你的故事，让我们一起探索SVG的无限可能，让魔法更加绚烂多彩！欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。
简介svg的核心能力——矢量缩放
zhengsr12345的博客
02-12 2445
简介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 1228
svg学习
svg 进阶
weixin_47121832的博客
02-09 1122
viewBox表示svg的绘制坐标系默认值取viewport svg的viewBox是怎么计算的呢 就是拿viewport 中的x和y除viewBox的x和y得到一个比值然后拿着这个比值去等比的缩放或者放大svg的宽高。preserveAspectRatio 是一个较难理解的概念，它相当于在 viewport 内部绘制了一个虚拟内框，它的默认值为：xMidYMid meet。meet 模式下，svg 将优先采纳压缩比较小的作为最终压缩比，meet 是默认参数。viewport 是 svg 图像的可见区域。
深入解析HTML5使用SVG图像时的viewBox属性用法
09-28
理解并熟练运用viewBox属性对于HTML5中的SVG图像处理至关重要。它可以让我们创建出适应不同设备的响应式SVG图形，同时提供了一种裁剪SVG图像以显示特定内容的方法。通过结合其他CSS和JavaScript技术，开发者可以...
SVG图像生成示例
09-19
3. 组合SVG元素：将所有转换后的点组合成一个完整的SVG文档结构，包括`<svg>`根元素、视口定义（`viewBox`）、以及可能的CSS样式。 4. 文件输出：将生成的SVG字符串写入到一个SVG文件中，例如命名为“CreateSVG.svg...
SVG转Android VectorDrawable工具
11-12
在Android应用开发中，高质量的图形资源是必不可少的，SVG（Scalable Vector Graphics）是一种矢量图...在使用过程中，理解SVG和VectorDrawable的区别及转换原理，将有助于更好地利用这类工具，并解决可能出现的问题。
SVG入门资料
12-25
在SVG-master这个压缩包中，很可能包含了SVG的基本示例代码、教程文档或练习项目，通过学习这些内容，你可以深入理解SVG的工作原理，并掌握创建和编辑SVG图形的技能。无论是前端开发、UI设计还是数据可视化，SVG都是...
SVG矢量动画
09-06
6. **SVG Viewbox和PreserveAspectRatio属性**：这两个属性可以用来控制SVG元素在不同尺寸下的显示方式，也可以在动画中发挥重要作用，例如视口动画。 在实际应用中，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="...
12. SVG 的viewBox属性详解
一名全栈开发工程师
05-14 1551
当SVG元素的视窗（viewport）和viewBox的宽高比不匹配时，SVG内容应如何缩放和对齐。属性可以接受多种不同的值，每个值都会影响SVG内容的缩放和对齐方式。这个属性的值由两部分组成：对齐方式和缩放行为。第一个参数是必须的第二个是可选的。
SVG进阶-理解viewBox
natsu-cc的博客
03-25 1718
viewPort 表示SVG可见区域的大小，或者可以想象成舞台大小，画布大小。 <svg width="500" height="300"></svg> 在SVG中，值可以带单位也不可以不带。一个不带单位的值可以在用户空间中通过用户单位声明。如果值通过用户单位声明，那么这个值的数值被认为和px单位的数值一样。这意味着上述例子将被渲染为500px*300px的视窗。 你也可以使用单位来声明值。SVG支持的长度单位有：em，ex，px，pt，pc，cm，mm，in和百分比。 Vie
svg viewBox
xm_law的博客
08-28 508
viewBox可以为视口指定用户坐标 例如：要在4厘米X5厘米的图纸上设置一个每厘米16个单位的坐标系统，要使用这个开始标记：viewBox(0 0 416 516),它分别代表想要叠加在视口上的用户坐标系统的最小x坐标，最小y坐标，宽度和高度，后者数值越大图像会缩放得越小 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http:/...
SVG自适应设置（viewBox）
曾小超的博客
12-04 4162
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" /> <title>SVG测试</title> </head> <body style="padding:0px; margin:0px;"> <svg currentScale="1" width="160px" height="240px" viewBox=.

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值