flexbox 中相邻 SVG 图像之间的接缝形成

Question

我已将单个 SVG 图像拆分为多个部分，并将它们放在 CSS flexbox 的一行中。目标是保持高度不变但允许宽度改变。我可以水平拉伸图像的某些部分而不会导致纵横比问题，同时保持其他部分不变。

问题是，特别是在 Firefox 中，相邻 SVG 图像之间的接缝可见：

.gb-top-border {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
}

.gb-top-border-column-fix {
  flex: 0 0 auto;
  display: flex;
}

.gb-top-border-column-flex-1 {
  flex: 10 10 auto;
  display: flex;
}

.gb-top-border-column-flex-2 {
  flex: 5 5 auto;
  display: flex;
  min-width: 0;
}

.gb-img-vfill {
  width: 100%;
  max-height: 100px;
}

.gb-img-top {
  max-height: 100px;
}

.pad {
  padding: 5px;
}

<div class="gb-top-border">
  <div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/feD.svg" class="gb-img-top pad"></div>
  <div class="gb-top-border-column-flex-1"><img src="https://svgshare.com/i/fge.svg" class="gb-img-vfill pad"></div>
  <div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/fgL.svg" class="gb-img-top pad"></div>
  <div class="gb-top-border-column-flex-2"><img src="https://svgshare.com/i/fge.svg" class="gb-img-vfill pad"></div>
  <div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/fff.svg" class="gb-img-top pad"></div>
</div>
<br>

<div class="gb-top-border">
  <div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/feD.svg" class="gb-img-top"></div>
  <div class="gb-top-border-column-flex-1"><img src="https://svgshare.com/i/fge.svg" class="gb-img-vfill"></div>
  <div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/fgL.svg" class="gb-img-top"></div>
  <div class="gb-top-border-column-flex-2"><img src="https://svgshare.com/i/fge.svg" class="gb-img-vfill"></div>
  <div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/fff.svg" class="gb-img-top"></div>
</div>

这是一个现场演示，展示了带内边距和不带内边距的 flexbox： https://codepen.io/ScottMastro/pen/mdpmwEy

我认为这可能只是 firefox 的一个不可避免的功能，所以我考虑了解决方法。如果我可以将图像的第二和第四部分水平拉伸到略微超出其 div 容器的边界，它将防止接缝。我还没有想出 CSS 能够做到这一点。

Answer 1

您的 SVG 图片的尺寸不是整数，因此在渲染过程中很可能会出现舍入问题。但是，即使它们是，在某些不规则的缩放级别下，也可能存在舍入问题。

我使用 Firefox 设法隐藏了 100% 缩放的接缝，但不是所有不同级别的缩放。

.gb-top-border-column-fix {
  flex: 0 0 auto;
  display: flex;
  margin: 0 -3px;
}

缩小并返回到 100% 后，可能会再次出现接缝。

我怀疑在

上使用 background-images 对于此用例可能比管理标签更容易（您可以更轻松地 'cut off' non-integer部分背景图片比 ).

Answer 2

我在 2 个灵活的段的内部 img 中添加了一些样式。

使用这种技术，即使有填充的情况也可以合并。（我设置的尺寸比覆盖这种情况所需的尺寸大，在正常情况下尺寸可以更低）。

.gb-top-border{
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
}

.gb-top-border-column-fix {
  flex: 0 0 auto;
  display: flex;
}

.gb-top-border-column-flex-1 {
  flex: 10 10 auto;
  display: flex;
}

.gb-top-border-column-flex-2 {
  flex: 5 5 auto;
  display: flex;
  min-width: 0;
}

.gb-img-vfill {
  width: 100%;
  max-height: 100px;
}
.gb-img-top {
  max-height: 100px;
}
.pad {
  padding: 1px;
}

/* added */
.gb-top-border-column-flex-1 img,
.gb-top-border-column-flex-2 img {
    margin-left: -5px;
    margin-right: -5px;
    width: calc(100% + 10px);
}

<div class="gb-top-border">
    <div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/feD.svg" class="gb-img-top pad"></div>
    <div class="gb-top-border-column-flex-1"><img src="https://svgshare.com/i/fge.svg" class="gb-img-vfill pad"></div>
    <div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/fgL.svg" class="gb-img-top pad"></div>
    <div class="gb-top-border-column-flex-2"><img src="https://svgshare.com/i/fge.svg" class="gb-img-vfill pad"></div> 
    <div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/fff.svg" class="gb-img-top pad"></div>
</div>
<br>

<div class="gb-top-border">
    <div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/feD.svg" class="gb-img-top"></div>
    <div class="gb-top-border-column-flex-1"><img src="https://svgshare.com/i/fge.svg" class="gb-img-vfill"></div>
    <div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/fgL.svg" class="gb-img-top"></div>
    <div class="gb-top-border-column-flex-2"><img src="https://svgshare.com/i/fge.svg" class="gb-img-vfill"></div> 
    <div class="gb-top-border-column-fix"><img src="https://svgshare.com/i/fff.svg" class="gb-img-top"></div>
</div>

Answer 3

我使用了背景图片而不是 img 标签，并添加了一些边距，这样即使在不同的缩放级别下也不会出现白缝。但是，在某些缩放级别下，深棕色区域的顶部边框在可伸缩部分中看起来可能与在 fixed-width 部分中略有不同。

.gb-top-border {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
}

.gb-top-border-column-fix {
  flex: 0 0 auto;
  display: flex;
}

.gb-top-border-column-flex-1 {
  flex: 10 10 auto;
  display: flex;
}

.gb-top-border-column-flex-2 {
  flex: 5 5 auto;
  display: flex;
  min-width: 0;
}

.gb-img-vfill {
  width: 100%;
  max-height: 100px;
}

.gb-img-top {
  max-height: 100px;
}

.pad {
  padding: 5px;
}

<div class="gb-top-border">
    <div class="gb-top-border-column-fix" style="background-image:url('https://svgshare.com/i/feD.svg'); height: 100px; width:123px; background-repeat: no-repeat; background-size: auto 102px"></div>
    <div class="gb-top-border-column-flex-1" style="background-image:url('https://svgshare.com/i/fge.svg'); height: 100px; margin-left:-1px ; background-size: 7px 102px"></div>
    <div class="gb-top-border-column-fix" style="background-image:url('https://svgshare.com/i/fgL.svg'); height: 100px; width:224px; background-position: -3px 0; margin-right: -3px; background-repeat: no-repeat;background-size: auto 102px"></div>
    <div class="gb-top-border-column-flex-2" style="background-image:url('https://svgshare.com/i/fge.svg'); height: 100px; margin-left:-3px; margin-right: -3px; background-size: 7px 102px"></div> 
    <div class="gb-top-border-column-fix" style="background-image:url('https://svgshare.com/i/fff.svg'); height: 100px; width:59px; background-position: -3px 0; background-repeat: no-repeat; background-size: auto 102px"></div>
</div>
<br>

flexbox 中相邻 SVG 图像之间的接缝形成

Seam forming between adjacent SVG images in flexbox

html

css

svg

firefox

flexbox