代码之家 › 专栏 › 技术社区 › Madamadam

非比例缩放SVG图像以适应剩余空间

flexbox svg css html

Madamadam · 技术社区 · 4 年前

下面的箭头由3个单独的元素组成。中心部分应水平拉伸,以便箭头可以填充其周围的容器。但是正如你在渲染代码中看到的,拉伸不起作用。如何启用拉伸并确保接合处没有间隙。也许,由于 antialiasing (这是强制性的)。

编辑:使用 preserveAspectRatio="none" @Turnip建议拉伸图像,但在某些宽度上会产生间隙和跳跃。请查看此屏幕截图:

根本无法解释这种奇怪的行为!

.arrow {
  display: flex;
  max-width: 200px;
  padding-bottom: 2em;
}

.arrow svg {
  height: 25px;
  shape-rendering: auto;
}

#arrow-1 svg.stretched {}

#arrow-2 svg.stretched {
  width: 100%;
}

<div class="arrow" id="arrow-1">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 25">
  <path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M13 2.5h-1.31A5.21 5.21 0 006.5 7.69v14.62"/>
</svg>

  <svg xmlns="http://www.w3.org/2000/svg" class="mid" viewBox="0 0 3 25"><rect y="1" width="3" height="3"/></svg>

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 25">
  <path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M5.5 15.84V7.69A5.21 5.21 0 00.31 2.5H0"/>
  <path d="M5.5 24.31l4.88-11.94-4.88 2.84-4.88-2.84L5.5 24.31z"/>
</svg>
</div>

<div class="arrow" id="arrow-2">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 25">
  <path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M13 2.5h-1.31A5.21 5.21 0 006.5 7.69v14.62"/>
</svg>

  <svg xmlns="http://www.w3.org/2000/svg" class="stretched" viewBox="0 0 3 25"><rect y="1" width="3" height="3"/></svg>

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 25">
  <path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M5.5 15.84V7.69A5.21 5.21 0 00.31 2.5H0"/>
  <path d="M5.5 24.31l4.88-11.94-4.88 2.84-4.88-2.84L5.5 24.31z"/>
</svg>
</div>

1 回复 | 直到 4 年前

Temani Afif 4 年前

你可以使用CSS完成最大的部分,它更容易处理:

.box {
  width: 50%;
  margin: auto;
  height: 50px;
  border: 10px solid;
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  position: relative;
}

.box::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -5px;
  width: 45px;
  height: 58px;
  transform: translate(50%, 30%);
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 12 11 13"><path d="M5.5 24.31l4.88-11.94-4.88 2.84-4.88-2.84L5.5 24.31z"></path></svg>') bottom/contain no-repeat;
}

<div class="box"></div>

如下所示:

.box {
  width: 50%;
  margin: auto;
  height: 50px;
  border: 10px solid;
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  position: relative;
}

.box svg {
  position: absolute;
  bottom: 0;
  right: -5px;
  width: 45px;
  transform: translate(50%, 30%);
}

<div class="box">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 12 11 13"><path d="M5.5 24.31l4.88-11.94-4.88 2.84-4.88-2.84L5.5 24.31z"></path></svg>
</div>

enxaneta 4 年前

我只使用了一个svg元素,而不是使用3个svg元素。我把“箭”的开始和结束放在一个 <symbol> 这样我就可以在需要的地方使用这些形状。请注意 <符号> 元素有一个紧凑的视框(视框紧紧包裹着形状,大小与形状的边界框相同,另加1/2线宽的额外空间)。

现在,我可以根据需要在任何地方多次使用这些符号。

为了连接这两个使用元素,我使用了一条线。请注意,行(在第一组中)的x1属性为18,其中18=10(第一个use元素的x属性)+8(第一个user元素的width属性)。

行的x2属性取决于需要多长时间,并且与第二个use元素的属性x具有相同的值。

<svg viewBox="0 0 130 70">
  <symbol id="start" xmlns="http://www.w3.org/2000/svg" viewBox="5 0 8 22">
    <path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M13 2.5h-1.31A5.21 5.21 0 006.5 7.69v14.62" />
  </symbol>

  <symbol id="end" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 25">
    <path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M5.5 15.84V7.69A5.21 5.21 0 00.31 2.5H0" />
    <path d="M5.5 24.31l4.88-11.94-4.88 2.84-4.88-2.84L5.5 24.31z" />
  </symbol>

  <g id="g1">
    <use xlink:href="#start" x="10" width="8" height="22" />
    <use xlink:href="#end" x="100" width="11" height="25" />
    <line x1="18" y1="2.5" x2="100" y2="2.5" stroke="black" stroke-width="3" stroke-linecap="round" />
  </g>
  
  <g id="g2">
    <use xlink:href="#start" x="20" y="35" width="8" height="22" />
    <use xlink:href="#end" x="70" y="35" width="11" height="25" />
    <line x1="28" x2="70" y1="37.5" y2="37.5" stroke="black" stroke-width="3" stroke-linecap="round" />
  </g>
</svg>

Turnip Moushumi Ahmed 4 年前

使用 preserveAspectRatio="none" 在您想要拉伸的SVG上。这将允许内部 rect 与SVG元素一起拉伸。

.arrow {
  display: flex;
  max-width: 200px;
  padding-bottom: 2em;
}

.arrow svg {
  height: 25px;
  shape-rendering: auto;
}

#arrow-1 svg.stretched {}

#arrow-2 svg.stretched {
  width: 100%;
}

<div class="arrow" id="arrow-1">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 25">
  <path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M13 2.5h-1.31A5.21 5.21 0 006.5 7.69v14.62"/>
</svg>

  <svg xmlns="http://www.w3.org/2000/svg" class="mid" viewBox="0 0 3 25"><rect y="1" width="3" height="3"/></svg>

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 25">
  <path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M5.5 15.84V7.69A5.21 5.21 0 00.31 2.5H0"/>
  <path d="M5.5 24.31l4.88-11.94-4.88 2.84-4.88-2.84L5.5 24.31z"/>
</svg>
</div>

<div class="arrow" id="arrow-2">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 25">
  <path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M13 2.5h-1.31A5.21 5.21 0 006.5 7.69v14.62"/>
</svg>

  <svg xmlns="http://www.w3.org/2000/svg" class="stretched" viewBox="0 0 3 25" preserveAspectRatio="none"><rect y="2" width="3" height="3"/></svg>

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 25">
  <path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M5.5 15.84V7.69A5.21 5.21 0 00.31 2.5H0"/>
  <path d="M5.5 24.31l4.88-11.94-4.88 2.84-4.88-2.84L5.5 24.31z"/>
</svg>
</div>