不按比例缩放SVG图像以适合剩余空间

如何解决不按比例缩放SVG图像以适合剩余空间

下方箭头由3个单个元素组成。中心部分应水平伸展，以便箭头可以填充其周围的容器。但是，正如您在呈现的代码中看到的那样，拉伸无法正常工作。如何进行拉伸并确保在接合处没有缝隙。可能由于antialiasing（这是强制性的），各部分之间应该有很小的重叠。

编辑：使用@Turnip建议的return admin.database().ref('Support/issuesubtype/'+res).once('value') .then( snap => { 拉伸图像，但是会产生间隙并在某些宽度上跳跃。看这个截图：

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

preserveAspectRatio="none"

.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%;
}

解决方法

我没有使用3个svg元素，而是仅使用了一个。我将“箭头”的开头和结尾放在<symbol>元素中，以便可以在需要的地方使用这些形状。请注意<symbol>元素具有紧密的视图框（viewBox紧紧包裹了形状，并且具有与形状的边界框相同的大小+线的1/2宽度的一些额外空间）。 / p>

现在，我可以根据需要和需要的地方多次使用这些符号。

为了连接2个use元素，我使用了一条线。请注意，该行（在第一组中）的x1属性是18，其中18 = 10（第一个使用元素的x属性）+ 8（第一个使用元素的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>

,

您可以使用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>

,

在要拉伸的SVG上使用 const functions = require('firebase-functions'); const util = require('util'); exports.helloWorld = functions.https.onRequest((req,res) => { // For Firebase Hosting URIs,use req.headers['fastly-client-ip'] // For callable functions,use rawRequest // Some users have better success with req.headers['x-appengine-user-ip'] const ipAddress = req.headers['x-forwarded-for'] || req.connection.remoteAddress; const headers = JSON.stringify(req.headers,null,2); const message = util.format("<pre>Hello world!\n\nYour IP address: %s\n\nRequest headers: %s</pre>",ipAddress,headers); res.send(message); }); 。这将使内部preserveAspectRatio="none"与SVG元素一起伸展。

rect

.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%;
}