不成比例地缩放 SVG 图像以适应剩余空间
[英]Scale SVG image non-proportionally to fit in remaining space
问题描述
Below arrow is composed out of 3 single elements.
下面的箭头由 3 个单个元素组成。 The center part should stretch horizontally so the arrow can fill its surrounding container.中心部分应水平拉伸，以便箭头可以填充其周围的容器。 But as you can see in the rendered code, the stretching doesn't work.但是正如您在呈现的代码中看到的那样，拉伸不起作用。 How to enable stretching and making sure, there are no gaps at the junctures.如何启用拉伸并确保在接合处没有间隙。 Probably, there should be a small overlap between the parts because of the antialiasing (which is mandatory).由于抗锯齿（这是强制性的），部件之间可能会有少量重叠。
EDIT: Using preserveAspectRatio="none" suggested by @Turnip is stretching the image, but it is producing gaps and jumps on certain widths.编辑：使用@Turnip 建议的preserveAspectRatio="none"正在拉伸图像，但它会在某些宽度上产生间隙和跳跃。 See this screenshot:看这个截图：
Can't explain this weird behavior at all!根本无法解释这种奇怪的行为！
.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>
3 个解决方案
解决方案1
2 2020-09-01 18:56:21
Instead of using 3 svg elements I'm using only one.我只使用了一个，而不是使用 3 个 svg 元素。 I'm putting the start and the end of the "arrow" in a <symbol> element so that I can use those shapes where I need them.我将“箭头”的起点和终点放在<symbol>元素中，以便我可以在需要的地方使用这些形状。 Please observe that the <symbol> elements have a tight viewbox (the viewBox is wrapping tight the shape and has the same size as the bounding box of the shape + some extra space for the 1/2 width of the line).请注意<symbol>元素有一个紧密的 viewbox（viewBox 紧紧地包裹着形状，并且与形状的边界框大小相同+一些额外的空间用于 1/2 的线宽）。
Now I can use those symbols as many times as I need and where I need.现在，我可以根据需要在需要的地方多次使用这些符号。
In order to connect the 2 use elements I'm using a line.为了连接 2 个使用元素，我使用了一条线。 please observe that the x1 attribute of the line (in the first group) is 18 where 18 = 10 (the x attribute of the first use element) + 8 (the width attribute of the first use element).请注意线的 x1 属性（在第一组中）是 18，其中 18 = 10（第一个 use 元素的 x 属性）+ 8（第一个 use 元素的 width 属性）。
The x2 attribute of the line deppends on how long you need it to be and has the same value as the attribute x of the second use element.该行的 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>
解决方案2
2 已采纳 2020-09-01 19:19:33
You can do the biggest part using CSS and it would easier to handle:您可以使用 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>
Also like below:也喜欢下面：
.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>
解决方案3
1 2020-09-01 16:42:33
Use preserveAspectRatio="none" on the SVG that you want to stretch.在要拉伸的 SVG 上使用preserveAspectRatio="none" 。 This will allow the inner rect to stretch along with the SVG element.这将允许内部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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.