SVG 百分比坐标已关闭答案

【问题标题】：SVG percentage coordinate is offSVG 百分比坐标已关闭
【发布时间】：2018-05-15 16:28:07
【问题描述】：

我在另一个 SVG 中嵌套了三个 SVG。第一个应该是流动的和伸展的，所以preserveAspectRatio 是none。另外两个设置为10% 和90% 的x 值。但是，如果您调整页面大小，您会发现它们与左侧和右侧的距离不同。为什么？

我希望看到左边的距离与右边的距离相同。

.box {
  width: 60vw;
  border: 1px dashed lightgray;
}

svg {
  overflow: visible;
}

<div class="box">
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="50">
    
    <svg viewBox="0 0 2 2" preserveAspectRatio="none">
      <rect x="0" width="2" height="1" fill="#DDDDDD" />
    </svg>

    <svg x="10%" viewBox="0 0 20 20" preserveAspectRatio="xMinYMid">
      <rect x="0" y="0" width="10" height="10" fill="#7FDBFF" />
    </svg>

    <svg x="90%" viewBox="0 0 20 20" preserveAspectRatio="xMinYMid">
      <rect x="0" y="0" width="10" height="10" fill="#7FDBFF" />
    </svg>
    
  </svg>
</div>

【问题讨论】：

标签： html css svg responsive

【解决方案1】：

因为您在 90% 时开始绘制第二个蓝色框，而您真的想在 90% 时结束绘制。通过将第二个蓝色框的 viewBox 设置为：

viewBox="20 0 20 20"

【讨论】：

是的，我马上想到了。更好的选择是将所有viewBoxes 的第一个值设置为宽度的一半。 viewBox="5 0 20 20"，然后它们都从中心渲染。

【解决方案2】：

这是另一个解决方案。

这两个蓝色 SVG 除了 preserveAspectRatio 属性外是相同的。

.box {
  width: 60vw;
  border: 1px dashed lightgray;
}

svg {
  overflow: visible;
}

<div class="box">
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="50">
    
    <svg viewBox="0 0 2 2" preserveAspectRatio="none">
      <rect x="0" width="2" height="1" fill="#DDDDDD" />
    </svg>

    <svg x="10%" width="80%" height="100%" viewBox="0 0 10 20" preserveAspectRatio="xMinYMid">
      <rect x="0" y="0" width="10" height="10" fill="#7FDBFF" />
    </svg>

    <svg x="10%" width="80%" height="100%" viewBox="0 0 10 20" preserveAspectRatio="xMaxYMid">
      <rect x="0" y="0" width="10" height="10" fill="#7FDBFF" />
    </svg>

  </svg>
</div>

【讨论】：

这很好，但如果我有三个以上的盒子就会变得棘手。例如在10%、20%、30% 和90%。

【解决方案3】：

对于像我一样困惑的人，问题出在：

如果我将viewBox x 值设置为宽度10 / 2 = 5 的一半，那么我在技术上将原点平移到宽度的中心。

.box {
  width: 60vw;
  border: 1px dashed lightgray;
}

svg {
  overflow: visible;
}

<div class="box">
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="50">
    
    <svg viewBox="0 0 2 2" preserveAspectRatio="none">
      <rect x="0" width="2" height="1" fill="#DDDDDD" />
    </svg>

    <svg x="10%" viewBox="5 0 20 20" preserveAspectRatio="xMinYMid">
      <rect x="0" y="0" width="10" height="10" fill="#7FDBFF" />
    </svg>

    <svg x="90%" viewBox="5 0 20 20" preserveAspectRatio="xMinYMid">
      <rect x="0" y="0" width="10" height="10" fill="#7FDBFF" />
    </svg>
    
  </svg>
</div>

【讨论】：