首页 文章

svg viewBox属性

提问于
浏览 次
47

我正在从其官方文件中学习svg，有这样的路线 . 我没有得到它，如果它已经有 width 和 height 属性，那么在 viewBox="0 0 1500 1000" 再次指定它有什么意义？在官方文档中说，1124006 5px " is the same as a length of " 5“”，因此这个viewBox是1500px宽和1000高度视图，超过300px和200px . 那么为什么它首先定义宽度和高度值？

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

3 回答

  • 68

    宽度和高度是 <svg> 的大小 . viewBox控制其内容的显示方式，以便viewBox = "0 0 1500 1000"将 <svg> 元素的内容缩小5倍（1500/300 = 5和1000/200 = 5），内容将是它们的大小的1/5将没有viewBox但 <svg>

    想象一下，你有一个弹性表面，并将其切成4个相等的块 . 如果你扔掉3件，你的表面尺寸是原始表面的1/4 . 如果现在拉伸表面并使其与原始表面的尺寸相同，那么表面上的所有内容都将是两倍大小 . 这就是viewBox和width / height相关的方式 .

    回复于
  • 4

    如果未指定视图框，则假定元素中的所有无单位数字都是像素 . （并且SVG假定从dcm到像素的单位转换为90 dpi或每英寸像素 . ）

    使用视图框可以使元素中的无单位数字表示“用户单位”，并指定这些单位如何映射到该大小 . 为简单起见，只考虑x坐标，即标尺 . 您的视图框表示您的标尺将有1500个单位来匹配svg的200像素大小宽度 .

    从0到1500的线元素（无单位，即用户单位）将绘制200个像素，即跨越svg绘图的宽度 .

    （并且由于SVG可以在不损失分辨率的情况下进行扩展，因此当用户放大或缩小时，像素在现实世界中并没有多大意义 . ）

    它是一种坐标变换，各种各样 .

    我建议你从像“SVG Essentials”这样的书中学习，大约10美元，我从中粗略地引用了这个答案 .

    回复于
  • 17

    默认情况下

    <svg width="300" height="200">

    svg网格的“标尺”是像素（svg中的所有形状都是以像素为单位测量的）

    但是你想使用自己的单位，你可以使用viewBox attr：

    <svg width="300" height="200" viewBox="0 0 1500 1000">

    这意味着：

    horizontal axis: 1500（您的宽度单位）= 300px => 1（您的宽度单位）= 300 / 1500px = 1 / 5px

    vertical axis: 1000（你的身高单位）= 200px => 1（你的身高单位）= 200 / 1000px = 1 / 5px

    • 现在svg中的所有形状都会缩放：

    与原点相比，它们的宽度缩放到1 / 5px（1/5 <1 =>缩小） .

    与原点相比，它们的高度也可以缩放到1 / 5px（1/5 <1 =>缩小）

    回复于

相关问题