css - 理解 viewBox : how to use the correct size

Question

看看这个SVG .如您所见，我将其作为 base64 数据 uri 提供。这样做的原因是我想将它用作背景图像。但是，我在让它按照我想要的方式工作时遇到了一些困难，我担心我对 viewbox 属性有一些误解。但首先让我举一个我想要完成的例子。

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
body::after {
  content: "";
  display: block;
  height: 0;
  padding: 11%;
  width: 76%;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDYuNTMgNDAuNzgiIGJhc2VQcm9maWxlPSJiYXNpYyIgdmVyc2lvbj0iMS4xIiB5PSIwcHgiIHg9IjBweCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgo8Zz4KCTxwYXRoIGZpbGw9InJnYigxMCwgNTQsIDgzKSIgZD0ibTE5NiAxNS4yYzYuMS00LjYgMTAuNy01IDEwLjctNSAwLjggMC41IDMuMSAxLjYgNS41IDIuMyA3LjggMi40IDEzLjUgMS45IDE0LjQtMC4xIDAuNy0xLjUtMC44LTMuNi0zLjQtNC43LTguNi0zLjgtMjAuNS0wLjctMjAuNS0wLjdzLTQuNC0zLjEtNy40LTQuNGMtMTAuMS00LjUtMjEuNS0wLjItMjYuMSAxMC4yLTEuNCAzLjEtMS44IDYtMS43IDguNGwwLjUtMC4xYzAtMi40IDAuMy01LjEgMS42LTguMSA0LjYtMTAuNSAxNS44LTE0LjIgMjUuNC0xMCAyLjggMS4yIDUuMyAzLjIgNi43IDQuMi04IDMuNC0xMS40IDYuNS0xMy41IDkuN2gyLjIgMTYwLjV2LTEuOGgtMTU0Ljl6bTI3LjgtNmMxLjYgMC43IDIuNSAyLjEgMi4xIDMtMC44IDEuOS04LjQgMS40LTEzLjQtMC4zLTEuOS0wLjYtNS4yLTIuMS01LjItMi4xIDktMi4yIDEzLjctMS44IDE2LjUtMC42em0tNDEuNCA5Yy00LjYgMTAuNS0xNS44IDE0LjItMjUuNCAxMC0yLjgtMS4yLTUuMy0zLjItNi43LTQuMiA4LTMuNCAxMS40LTYuNSAxMy41LTkuN2gtMi4yLTE2MC42djEuOGgxNTUuMWMtNi4xIDQuNi0xMC43IDUtMTAuNyA1LTAuOC0wLjUtMy4xLTEuNi01LjUtMi4zLTcuOC0yLjQtMTMuNS0xLjktMTQuNCAwLjEtMC43IDEuNSAwLjggMy42IDMuNCA0LjcgOC42IDMuOCAyMC41IDAuNyAyMC41IDAuN3M0LjQgMy4xIDcuNCA0LjRjMTAuMSA0LjUgMjEuNSAwLjIgMjYuMS0xMC4yIDEuNC0zLjEgMS44LTYgMS43LTguNGwtMC41IDAuMWMwIDIuMy0wLjQgNS0xLjcgOHptLTU0LjEgMy45Yy0xLjYtMC43LTIuNS0yLjEtMi4xLTMgMC44LTEuOSA4LjQtMS40IDEzLjQgMC4zIDEuOSAwLjYgNS4yIDIuMSA1LjIgMi4xLTkgMi4zLTEzLjcgMS45LTE2LjUgMC42eiIvPgo8L2c+Cjwvc3ZnPgo=");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  margin: 24px auto;
}

如果仔细观察，您会发现背景图像没有居中。 (当你打开你的开发工具并突出显示伪元素的框时，它非常清楚。)起初我以为你不能将数据 URI 居中，但后来我注意到当你在 devtools 中将鼠标悬停在数据 URI 上时，它说“图像”的尺寸为 300x30。 Chrome 还会显示图片的小预览。从这里可以清楚地看出尺寸不正确。 10 比 1 的比例不正确。

数据 URI 是从以下 SVG 生成的，我在其中指定了 viewBox 属性的值。尽管它接近 10-1，但事实并非如此。所以我在想出了什么问题，因为嵌入式数据 URI 不遵守建议的维度。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 406.53 40.78" baseProfile="basic" version="1.1" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
    <path fill="rgb(10, 54, 83)" d="m196 15.2c6.1-4.6 10.7-5 10.7-5 0.8 0.5 3.1 1.6 5.5 2.3 7.8 2.4 13.5 1.9 14.4-0.1 0.7-1.5-0.8-3.6-3.4-4.7-8.6-3.8-20.5-0.7-20.5-0.7s-4.4-3.1-7.4-4.4c-10.1-4.5-21.5-0.2-26.1 10.2-1.4 3.1-1.8 6-1.7 8.4l0.5-0.1c0-2.4 0.3-5.1 1.6-8.1 4.6-10.5 15.8-14.2 25.4-10 2.8 1.2 5.3 3.2 6.7 4.2-8 3.4-11.4 6.5-13.5 9.7h2.2 160.5v-1.8h-154.9zm27.8-6c1.6 0.7 2.5 2.1 2.1 3-0.8 1.9-8.4 1.4-13.4-0.3-1.9-0.6-5.2-2.1-5.2-2.1 9-2.2 13.7-1.8 16.5-0.6zm-41.4 9c-4.6 10.5-15.8 14.2-25.4 10-2.8-1.2-5.3-3.2-6.7-4.2 8-3.4 11.4-6.5 13.5-9.7h-2.2-160.6v1.8h155.1c-6.1 4.6-10.7 5-10.7 5-0.8-0.5-3.1-1.6-5.5-2.3-7.8-2.4-13.5-1.9-14.4 0.1-0.7 1.5 0.8 3.6 3.4 4.7 8.6 3.8 20.5 0.7 20.5 0.7s4.4 3.1 7.4 4.4c10.1 4.5 21.5 0.2 26.1-10.2 1.4-3.1 1.8-6 1.7-8.4l-0.5 0.1c0 2.3-0.4 5-1.7 8zm-54.1 3.9c-1.6-0.7-2.5-2.1-2.1-3 0.8-1.9 8.4-1.4 13.4 0.3 1.9 0.6 5.2 2.1 5.2 2.1-9 2.3-13.7 1.9-16.5 0.6z"/>
</g>
</svg>

所以我很茫然。为什么 SVG/data URI 背景在用作背景时不遵循 viewBox 中指定的比例/框？我该如何解决这个问题？

Answer 1

我相信您原来的 SVN 不是您认为的比例，所以您在 viewbox 中宽度-高度的变化影响了您的整体 View 。

检查这里(宽度/高度从 406.53 40.78 更改为 352 31):

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
body::after {
  content: "";
  display: block;
  height: 0;
  padding: 11% 0;
  width: 100%;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNTIgMzEiIGJhc2VQcm9maWxlPSJiYXNpYyIgdmVyc2lvbj0iMS4xIiB5PSIwcHgiIHg9IjBweCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KPGc+DQoJPHBhdGggZmlsbD0icmdiKDEwLCA1NCwgODMpIiBkPSJtMTk2IDE1LjJjNi4xLTQuNiAxMC43LTUgMTAuNy01IDAuOCAwLjUgMy4xIDEuNiA1LjUgMi4zIDcuOCAyLjQgMTMuNSAxLjkgMTQuNC0wLjEgMC43LTEuNS0wLjgtMy42LTMuNC00LjctOC42LTMuOC0yMC41LTAuNy0yMC41LTAuN3MtNC40LTMuMS03LjQtNC40Yy0xMC4xLTQuNS0yMS41LTAuMi0yNi4xIDEwLjItMS40IDMuMS0xLjggNi0xLjcgOC40bDAuNS0wLjFjMC0yLjQgMC4zLTUuMSAxLjYtOC4xIDQuNi0xMC41IDE1LjgtMTQuMiAyNS40LTEwIDIuOCAxLjIgNS4zIDMuMiA2LjcgNC4yLTggMy40LTExLjQgNi41LTEzLjUgOS43aDIuMiAxNjAuNXYtMS44aC0xNTQuOXptMjcuOC02YzEuNiAwLjcgMi41IDIuMSAyLjEgMy0wLjggMS45LTguNCAxLjQtMTMuNC0wLjMtMS45LTAuNi01LjItMi4xLTUuMi0yLjEgOS0yLjIgMTMuNy0xLjggMTYuNS0wLjZ6bS00MS40IDljLTQuNiAxMC41LTE1LjggMTQuMi0yNS40IDEwLTIuOC0xLjItNS4zLTMuMi02LjctNC4yIDgtMy40IDExLjQtNi41IDEzLjUtOS43aC0yLjItMTYwLjZ2MS44aDE1NS4xYy02LjEgNC42LTEwLjcgNS0xMC43IDUtMC44LTAuNS0zLjEtMS42LTUuNS0yLjMtNy44LTIuNC0xMy41LTEuOS0xNC40IDAuMS0wLjcgMS41IDAuOCAzLjYgMy40IDQuNyA4LjYgMy44IDIwLjUgMC43IDIwLjUgMC43czQuNCAzLjEgNy40IDQuNGMxMC4xIDQuNSAyMS41IDAuMiAyNi4xLTEwLjIgMS40LTMuMSAxLjgtNiAxLjctOC40bC0wLjUgMC4xYzAgMi4zLTAuNCA1LTEuNyA4em0tNTQuMSAzLjljLTEuNi0wLjctMi41LTIuMS0yLjEtMyAwLjgtMS45IDguNC0xLjQgMTMuNCAwLjMgMS45IDAuNiA1LjIgMi4xIDUuMiAyLjEtOSAyLjMtMTMuNyAxLjktMTYuNSAwLjZ6Ii8+DQo8L2c+DQo8L3N2Zz4=");
  background-repeat: no-repeat;
  background-position: center center;
}

Original SVG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 406.53 40.78" baseProfile="basic" version="1.1" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
    <path fill="rgb(10, 54, 83)" d="m196 15.2c6.1-4.6 10.7-5 10.7-5 0.8 0.5 3.1 1.6 5.5 2.3 7.8 2.4 13.5 1.9 14.4-0.1 0.7-1.5-0.8-3.6-3.4-4.7-8.6-3.8-20.5-0.7-20.5-0.7s-4.4-3.1-7.4-4.4c-10.1-4.5-21.5-0.2-26.1 10.2-1.4 3.1-1.8 6-1.7 8.4l0.5-0.1c0-2.4 0.3-5.1 1.6-8.1 4.6-10.5 15.8-14.2 25.4-10 2.8 1.2 5.3 3.2 6.7 4.2-8 3.4-11.4 6.5-13.5 9.7h2.2 160.5v-1.8h-154.9zm27.8-6c1.6 0.7 2.5 2.1 2.1 3-0.8 1.9-8.4 1.4-13.4-0.3-1.9-0.6-5.2-2.1-5.2-2.1 9-2.2 13.7-1.8 16.5-0.6zm-41.4 9c-4.6 10.5-15.8 14.2-25.4 10-2.8-1.2-5.3-3.2-6.7-4.2 8-3.4 11.4-6.5 13.5-9.7h-2.2-160.6v1.8h155.1c-6.1 4.6-10.7 5-10.7 5-0.8-0.5-3.1-1.6-5.5-2.3-7.8-2.4-13.5-1.9-14.4 0.1-0.7 1.5 0.8 3.6 3.4 4.7 8.6 3.8 20.5 0.7 20.5 0.7s4.4 3.1 7.4 4.4c10.1 4.5 21.5 0.2 26.1-10.2 1.4-3.1 1.8-6 1.7-8.4l-0.5 0.1c0 2.3-0.4 5-1.7 8zm-54.1 3.9c-1.6-0.7-2.5-2.1-2.1-3 0.8-1.9 8.4-1.4 13.4 0.3 1.9 0.6 5.2 2.1 5.2 2.1-9 2.3-13.7 1.9-16.5 0.6z"/>
</g>
</svg>
New proportion SVG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 31" baseProfile="basic" version="1.1" y="0" x="0" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
    <path fill="rgb(10, 54, 83)" d="m196 15.2c6.1-4.6 10.7-5 10.7-5 0.8 0.5 3.1 1.6 5.5 2.3 7.8 2.4 13.5 1.9 14.4-0.1 0.7-1.5-0.8-3.6-3.4-4.7-8.6-3.8-20.5-0.7-20.5-0.7s-4.4-3.1-7.4-4.4c-10.1-4.5-21.5-0.2-26.1 10.2-1.4 3.1-1.8 6-1.7 8.4l0.5-0.1c0-2.4 0.3-5.1 1.6-8.1 4.6-10.5 15.8-14.2 25.4-10 2.8 1.2 5.3 3.2 6.7 4.2-8 3.4-11.4 6.5-13.5 9.7h2.2 160.5v-1.8h-154.9zm27.8-6c1.6 0.7 2.5 2.1 2.1 3-0.8 1.9-8.4 1.4-13.4-0.3-1.9-0.6-5.2-2.1-5.2-2.1 9-2.2 13.7-1.8 16.5-0.6zm-41.4 9c-4.6 10.5-15.8 14.2-25.4 10-2.8-1.2-5.3-3.2-6.7-4.2 8-3.4 11.4-6.5 13.5-9.7h-2.2-160.6v1.8h155.1c-6.1 4.6-10.7 5-10.7 5-0.8-0.5-3.1-1.6-5.5-2.3-7.8-2.4-13.5-1.9-14.4 0.1-0.7 1.5 0.8 3.6 3.4 4.7 8.6 3.8 20.5 0.7 20.5 0.7s4.4 3.1 7.4 4.4c10.1 4.5 21.5 0.2 26.1-10.2 1.4-3.1 1.8-6 1.7-8.4l-0.5 0.1c0 2.3-0.4 5-1.7 8zm-54.1 3.9c-1.6-0.7-2.5-2.1-2.1-3 0.8-1.9 8.4-1.4 13.4 0.3 1.9 0.6 5.2 2.1 5.2 2.1-9 2.3-13.7 1.9-16.5 0.6z"/>
</g>
</svg>
Background SVG: