如何使用<svg>视图框属性? [英] How to use the <svg> viewBox attribute?

问题描述

我正在从它的官方文档中学习 svg，有这么一行.我不明白，如果它已经有 width 和 height 属性，那么在 viewBox="0 0 1500 1000 中再次指定它有什么意义" ?据说，一个像素单位定义为一个用户单位.因此，5px"的长度与官方文档中5"的长度相同，因此这个viewBox的宽度为1500px，并且1000 高度视图，超过 300 像素和 200 像素.那么为什么它首先定义了宽度和高度值呢?

I am learning svg from its official documents, there is such line. I don't get it, if it already has a width and height attribute, what is the point to specify it again in viewBox="0 0 1500 1000" ? It is says, "One px unit is defined to be equal to one user unit. Thus, a length of "5px" is the same as a length of "5"" in the official docs, thus this viewBox is a 1500px wide and 1000 height view, which exceeds 300px and 200px. So why does it define the width and height value in the first place?

 <svg width="300px" height="200px" version="1.1"
         viewBox="0 0 1500 1000" preserveAspectRatio="none"
         xmlns="http://www.w3.org/2000/svg">

推荐答案

的宽度和高度有多大.viewBox 控制其内容的显示方式，因此 viewBox="0 0 1500 1000" 会将 <svg> 元素的内容缩小 5 倍(1500/300 = 5 和 1000/200 = 5) 并且内容将是没有 viewBox 但

The width and height are how big the <svg> is. The viewBox controls how its contents are displayed so the viewBox="0 0 1500 1000" will scale down the contents of <svg> element by a factor of 5 (1500 / 300 = 5 and 1000 / 200 = 5) and the contents will be 1/5 the size they would be without the viewBox but the <svg>

假设您有一个弹性表面并将其切成 4 等份.如果你扔掉 3 块，你得到的表面是原始表面大小的 1/4.如果现在拉伸曲面并使其与原始曲面的大小相同，则曲面上的所有内容都将是原来大小的两倍.这就是 viewBox 和 width/height 的关系.

Imagine you have an elastic surface and cut it into 4 equal pieces. If you throw 3 pieces away you've got a surface that's 1/4 the size of the original surface. If you now stretch the surface and make it the same size as the original surface then everything on the surface will be twice the size. That's how viewBox and width/height are related.

这篇关于如何使用<svg>视图框属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！