SVG中有尺寸的概念吗?


11

我想知道SVG文件。我知道这是XML中由路径标记定义的向量的集合,因此,为什么它在svg标记中具有以像素为单位的宽度和高度,如果我们删除这些尺寸怎么办?

Answers:


15

宽度和高度仅在viewBox设置时才相关。没有该属性,您可以安全地删除宽度和高度。它将始终以绘制时的比例显示。如果将a <rect>设置为10px宽,20px高,则当未设置viewBox时,它将以10x20的比例显示,带有或不带有width或hight。

如果viewBox设置了属性,则可以使用宽度和高度向上或向下调整原始比例。

没有宽度和高度,但设置了viewBox,这将允许svg无限缩放,这可能会或可能不会是您期望的行为。在响应式HTML页面中,这通常是需要的。它将向上或向下缩放以适合边界容器。

这些都一样

<svg width="240" height="240" xmlns="http://www.w3.org/2000/svg">
<svg xmlns="http://www.w3.org/2000/svg">

这使原始比例加倍。

<svg viewBox="0 0 120 120" width="240" height="240" 
xmlns="http://www.w3.org/2000/svg">

这允许无限缩放

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.