在HTML5文档中链接或内联的SVG图像是一种相对年轻的实践(按Web标准),但我认为它很快就会成熟.现代浏览器应该如何调整svg图像的大小,只显示它们的宽高比(按照它们的宽高比viewBox),以及父HTML文档只有(但不是两者)宽度或高度给定的位置？
为了有用地缩小主题,这个问题只关注<!DOCTYPE html>HTML5文档.
我创建了一个测试页面,在几个不同的HTML上下文中显示了这一点,并且只有Firefox的行为方式与我期望(并且更喜欢)的方式相同,在所有测试的情况下都推断出其中一个.在之前的测试中,Chrome曾经也是如此,但现在已不复存在了.歌剧非常接近.
我喜欢SVG的一个原因是,只要您说明图像的哪些部分应该显示(以及可选的应该如何裁剪),格式就可以让您制作渲染到任何文件大小的图像,而不是说明应该绘制多大的数据.
实际上,这可以让您在浏览器中随意查看和调整大小的徽标,只需将浏览器窗口大小调整为您想要的任何大小,它就可以快速地绘制到新的边界框,而不会大惊小怪.
这是通过设置一个完成viewBox的上属性<svg>元件,但无论是width也不height属性,因此它保留了其纵横比,与(默认)SVG定位和裁剪策略的preserveAspectRatio="xMidYMid meet",其基本上meens什么background-position: 50% 50%; background-size: contain;将意味着一个CSS3背景图像规范.
您想查看http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width,了解此处浏览器所需的行为.CSS称之为"内在"的是指图像的信息.
不久之前,这种行为从较差的默认值发生了变化,因此浏览器在这方面仍有问题.
| 归档时间： |
|
| 查看次数： |
1191 次 |
| 最近记录： |
