CSS基础(九)-viewBox(svg

SVG的知识体系比 Canvas大很多,今天介绍一些基础概念

基本要素:

HTML提供了定义标题、段落、表格等等内容的元素。与此类似,SVG也提供了一些元素,用于定义圆形、矩形、简单或复杂的曲线,以及其他形状。一个简单的SVG文档由根元素和基本的形状元素构成。另外还有一个g元素,它用来把若干个基本形状编成一个组。

从这些开始,SVG可以成为任何复杂的组合图形。SVG支持渐变、旋转、滤镜效果、JavaScript接口等等功能,但是所有这些额外的语言特性,都需要在一个定义好的图形区域内实现。

如果你对xml不了解,以下两点要记住:

SVG的元素和属性必须按标准格式书写,因为XML是区分大小写的(这一点和html不同)

SVG里的属性值必须用引号引起来,就算是数值也必须这样做。

各自特点:

SVG

SVG 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加JavaScript 事件处理器。

在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG对象的属性发生变化,那么浏览器能够自动重现图形。

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。

Canvas 是逐像素进行渲染的。

在 canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

两者区别:

SVG

不依赖分辨率(图像在缩放时其图形质量不会有所损失)

支持事件处理器

最适合带有大型渲染区域的应用程序(比如谷歌地图)

复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)

不适合游戏应用

Canvas

依赖分辨率(图像在缩放时其图形质量会有所损失)

不支持事件处理器

弱的文本渲染能力

能够以 .png 或 .jpg 格式保存结果图像

最适合图像密集型的游戏,其中的许多对象会被频繁重绘

坐标定位:

和canvas差不多,都是使用倒坐标轴,即以页面的左上角为(0,0)坐标点,坐标以像素为单位,x轴正方向是向右,y轴正方向是向下。在HTML文档中,元素都是用这种方式定位的。

viewport,viewbox登场

Viewport可以理解为svg的大小,类似于画布。此SVG的长宽各是200个单位。这里可以用css规定的单位如:px, em, %等。

官方定义:The value of the viewBox attributeis a list of four numbers min-x, min-y, width and height, separated by whitespace and/or a comma, which specify a rectanglein user space which is mapped to the bounds of the viewport established for theassociated element. (https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/viewBox)这句话简单理解就是:指定了一个矩形用来当作viewport和内部图形的一个映射。哇哦~这个很复杂的概念原来就和比例尺的概念一样。那么我们来看栗子~

此句代码表示,svg的宽高分别为400px和300px,为了看图方便我们加了一个红色边框。rect是svg内置的图形标签,意思是矩形的左上角(起始点)位于坐标(0,0),宽20单位(注意不是像素),高15单位(注意不是像素),填充骚紫色。如图:

那viewbox是怎么起到类似比例尺的作用呢?想象一下一个宽高比为40:30(4:3)的盒子,填充在宽高为400px,300px的viewport里,这样的话比例单位就是1:10px。那么rect中宽是20个单位,就是20 * 10px = 200px,高是15个单位,就是15 *10px = 150px。rect的宽高就是200px和100px! Yeap 这就是viewbox!

viewbox有几个特点:

1.总能以合适的比例放入viewport。不用担心viewbox太大或者太小;

2.viewbox总有一个边与viewport重合,就用这个重合的边计算比例单位。

3.受到preserveAspectRatio属性影响表示是否强制进行统一缩放,这个属性影响了我们用viewbox去计算比例单位的状况。

preserveAspectRatio2个默认值如下:

xMidYMid(默认值) -强制统一缩放。

将SVG元素的viewbox属性的X的中点值与视图的X的中点值对齐。

将SVG元素的viewbox属性的Y的中点值与视图的Y的中点值对齐。

meet(默认值) - 图形将缩放到:

宽高比将会被保留

整个SVG的viewbox在视图范围内是可见的

尽可能的放大SVG的viewbox,同时仍然满足其他的条件。

(preserveAspectRatio详细解释:https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio)

感兴趣的同学可以去看下此属性的其他值。

欢迎补充和指正,感谢关注《IT职业地图》

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180612G0KCKO00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励