将SVG置于div

Question

我想在一个位置显示一个SVG图像：fixed div。我有

<div class="main">
  <svg class="svg" viewBox="0 0 180 100">
    <rect height="100%" width="100%" fill="#003300"></rect>
  </svg>
</div>

和风格

.main {
  position:fixed;
  left: 100px;
  height: 100%;
  width:100%;
  background: #33AAAA;
}

.svg {
  display: block;
  height: 100%;
  width: 100%;
  position:static;
}

我想水平和垂直居中SVG。我得到一个奇怪的行为。更改浏览器窗口的大小，表明当svg小于可用宽度时，它被奇怪地放置。例如：左侧的空间比右侧多。

Codepen（包括CSS重置）：Codepen

Answer 1

您将宽度设置为100％，然后将其移动100px。宽度仍然按100％宽度计算。要以您想要的方式居中，您需要从宽度中减去100px或以不同的方式嵌套。

.main {
  position:fixed;  
  left:100px;
  height: 100%;
  width:calc(100% - 100px);
  background: #33AAAA;
}

Answer 2

它看起来像是因为你的left: 100px课程中有main。如果你把它拿出来就可以正确居中。

这是应该起作用的主要类：

.main {
  position:fixed;  
  left:100px;
  height: 100%;
  right: 0;
  top:0;
  bottom:0;
  background: #33AAAA;
}