SVG ViewBox

时间:2021-08-07 08:07:29

如果svg图形太大或者太小,就可以用ViewBox属性来调整在页面中的显示范围、大小。

“像素不能直接换算成英寸、厘米,要在 dpi ( dot per inch 分辨率,概念较多,鼠标 dpi ,打印机 dpi等,各有不同)下才能换算。”和我想的一样,这样可能会有个问题: svg 的显示在各种不同分辨率显示器上的表现可能不同——显示可能不全。用 svg 属性能“拯救”—— <svg width="50cm" height="25cm" viewBox="0 0 2050 1000" > :

意思是 svg 图形的 2050px , 1000px 范围,显示到 50cm,25cm 的视口, 0 , 0 是在视口中的起点坐标。 FireFox3.6 下坐标系和下图相反,坐标系建立在 svg 图形上。

根据实验,( svg 图形通过 embed 嵌入 html 页面 )图形大小调整 viewBox 后两位即可,调整前两位不起大小作用。

视口的理解:我们从视口看 svg 图形,就好像从窗口看外面的风景。

这样可以通过脚本来调整大小: html 页面上设置两个按钮,用放大缩小。看实际情况,不一定用到这个。

viewBox="0 0 2050 1000" 的前两位参数对于以 embed 标签嵌入 html 页面的 SVG 图形的坐标效果(坐标系建立在浏览器页面上, SVG 图形在坐标系上移动, viewBox 前两位参数依次是 x y ),(FF3.6+ 原生 SVG 解释器 & ASV3 均是如此)如下图:

SVG ViewBox

SVG ViewBox的更多相关文章

  1. SVG viewBox &amp&semi; coordinate system

    SVG viewBox & coordinate system https://codepen.io/xgqfrms/pen/abOOrjp <html> <body> ...

  2. SVG &lpar;viewBox&rpar; &amp&semi; DOM &lpar;viewport&rpar;

    SVG (viewBox) & DOM (viewport) circle "use strict"; /** * * @author xgqfrms * @license ...

  3. 理解SVG的viewport&comma;viewBox&comma;preserveAspectRatio

    万丈高楼平地起,基础很重要. viewport 表示SVG可见区域的大小,或者可以想象成舞台大小,画布大小. <svg width="500" height="30 ...

  4. Art-Directing SVG图像viewBox属性

    Art-Directing SVG图像viewBox属性 作者:彦子 日期:2015-06-02 点击:992 svg 译者注:根据Google Dev文档的解释,Art Direction在这篇文章 ...

  5. SVG&colon;textPath深入理解

    SVG的文本可以沿着一条自定义的Path来排布,比如曲线.圆形等等,使用方式如下所示(来源MDN): <svg viewBox="0 0 1000 300" xmlns=&q ...

  6. SVG动画

    动画原理 SVG动画,就是元素的属性值关于时间的变化. 如下图来说,元素的某个属性值的起始值(from)到结束值(to)在一个时间段(duration)根据时间函数(timing-function)计 ...

  7. SVG坐标系统

    SVG的画布.画布视区(viewBox).浏览器视窗的概念 画布 画布是绘制SVG内容的一块区域,理论上在所有维度上都是无限的.(也有人称为"SVG世界",但我觉得叫画布比较合适) ...

  8. HTML中的SVG

    HTML5中的SVG是Scalable Vector Graphic的简称,是一种用来绘制矢量图的HTML5标签,由万维网联盟定制,是一个基于可扩展标记语言,用于绘制二维可缩放矢量图形. 是一种使用X ...

  9. &lbrack;转&rsqb;用CSS给SVG &lt&semi;use&gt&semi;的内容添加样式

    来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=ref ...

随机推荐

  1. &lbrack;LeetCode&rsqb; Ones and Zeroes 一和零

    In the computer world, use restricted resource you have to generate maximum benefit is what we alway ...

  2. VS2010中出现无法嵌入互操作类型

    针对word或excel操作时,出现VS2010中,无法嵌入互操作类型“……”,请改用适用的接口的解决方法 问了度娘,解决方法如出一辙:选中项目中引入的dll,鼠标右键,选择属性,把“嵌入互操作类型” ...

  3. Codeforces Round &num;217 &lpar;Div&period; 2&rpar; c题

    C. Mittens time limit per test 1 second memory limit per test 256 megabytes input standard input out ...

  4. Android开发技巧——设置系统状态栏颜色

    开门见山,先来三张效果图: 然后我们再来讲如何实现以及如何快速地实现. 如何实现 实现设置系统状态栏颜色需要至少在Android 4.4.2(API 19)以上.这是因为,在这个版本以下,没有任何的A ...

  5. 表连接join on

    表A记录如下:  aID aNum  1 a20050111  2 a20050112  3 a20050113  4 a20050114  5 a20050115  表B记录如下:  bID bNa ...

  6. chrome浏览器的跨域设置 Google Chrome浏览器下开启禁用缓存和js跨域限制--disable-web-security

    chrome用户默认路径 Win7:C:\Users\[用户名]\AppData\Local\Google\Chrome\User Data\XP:C:\Documents and Settings\ ...

  7. &lbrack;转&rsqb;How do you build a database&quest;

    非常简短的文字,却异常明了的说明了一个数据库管理系统的核心原理,原文来自原文. Its a great question, and deserves a long answer. Most datab ...

  8. get&lowbar;class&lowbar;vars

    个人理解:感觉就是一个将类里的属性值转换为数组的一个东西. <?php class myclass { var $var1; // 此变量没有默认值…… var $var2 = "xy ...

  9. 使用SubstanceDesign和Unity插件ShaderForge制作风格化火焰

    使用 SubstanceDesign 软件可以制作shader用的特殊图片,原来真有这种软件,一直好奇这种图片怎么做的 https://www.kancloud.cn/hazukiaoi/sd_sf_ ...

  10. empty&lpar;&rpar; isset&lpar;&rpar; isnull&lpar;&rpar; 比较

    有关 PHP 的 empty(),isset() 还有 is_null() 这三个函数的用法讨论得已经很多了,而且很多资料也未必能说得很清楚.这里再重复一次,但不是从概念去说,直接用程序例子来说话,应 ...