SVG与纵横比无法正确对齐

Question

我一直试图解决这个问题一段时间，并且无法让某些width和height的SVG正确对齐。我的viewBox具有16:9宽高比，我想以相同的宽高比缩放SVG。对于某些width和height，它确实排成一行，但对于其他人来说它虽然都具有相同的宽高比。

有关导致此问题的任何提示？

我有一个JSFiddle供你试试，https://jsfiddle.net/n90ty8ys/1/

<svg id="svg-main-panel" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 768 432" preserveAspectRatio="xMinYMin meet" width="1120" height="630">
  <rect xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="200" height="200" fill="blue"></rect>
  <svg width="20" height="40" x="20" y="20">
    <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="657.247" y1="172.823" x2="657.247" y2="152.907" gradientTransform="rotate(90 405.13 -232.117)">
      <stop offset="0" stop-color="#BDCCD4"></stop>
      <stop offset=".5" stop-color="#EBF0F2"></stop>
      <stop offset="1" stop-color="#BDCCD4"></stop>
    </linearGradient>
    <path fill="url(#a)" d="M20 0H.034L0 40h19.966"></path>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" x="20" y="60">
    <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="19.775" y1="30" x2="-.14" y2="30">
      <stop offset="0" stop-color="#BDCCD4" />
      <stop offset=".5" stop-color="#EBF0F2" />
      <stop offset="1" stop-color="#BDCCD4" />
    </linearGradient>
    <path fill="url(#a)" d="M-.034 20h20v20h-20z" />
    <linearGradient id="b" gradientUnits="userSpaceOnUse" x1="-1207.701" y1="556.747" x2="-1207.701" y2="576.663" gradientTransform="matrix(0 -1 -1 0 576.556 -1188.2)">
      <stop offset="0" stop-color="#BDCCD4" />
      <stop offset=".5" stop-color="#EBF0F2" />
      <stop offset="1" stop-color="#BDCCD4" />
    </linearGradient>
    <path fill="url(#b)" d="M0 40l19.966-20L20-1H0" />
    <linearGradient id="c" gradientUnits="userSpaceOnUse" x1="-847.237" y1="1808.924" x2="-847.237" y2="1828.84" gradientTransform="matrix(-1 0 0 1 -826.737 -1788.733)">
      <stop offset="0" stop-color="#BDCCD4" />
      <stop offset=".5" stop-color="#EBF0F2" />
      <stop offset="1" stop-color="#BDCCD4" />
    </linearGradient>
    <path fill="url(#c)" d="M41 40V20H19.934L0 40h19.968" />
  </svg>
</svg>

Answer 1

更新

最初我认为viewBox和svg有不同的比例，实际上有相同的比例。我相应地更新了＃2。

我发现了两个潜在的问题：

1. 您的<path>元素在d属性中包含十进制数字。由于浏览器渲染单元是像素（整数），它可能会使您的SVG元素不对齐。在下面的代码段中，我将d属性中的所有十进制数字更改为整数。例如，我将<path fill="url(#c)" d="M41 40V20H19.934L0 40h19.968" />更改为<path fill="url(#c)" d="M41 40V20H20L0 40h20" />。

2. 您的基本<svg>的{​​{1}}大小（尤其是比率）与viewBox和width属性值不同。 您的viewBox宽度和高度分别为height和768，而432的大小值为<svg>。这种差异使SVG意外偏斜，并可能产生基于十进制的渲染，导致浏览器中的像素不对齐。由于width="1120" height="630"与viewBox的大小比为1：1.46（1120/768），它可能会导致错位元素。 Sara Soueidan有一个great article关于如何配置你的viewBox数字。

我在下面的代码段中应用了这两个更改，似乎工作正常。祝你好运！

<svg>