gpt4 book ai didi

html - 非按比例缩放 SVG 图像以适合剩余空间

转载 作者:行者123 更新时间:2023-12-02 02:40:40 24 4
gpt4 key购买 nike

下面的箭头由 3 个单个元素组成。中心部分应水平拉伸(stretch),以便箭头可以填充其周围的容器。但正如您在渲染的代码中看到的那样,拉伸(stretch)不起作用。如何进行拉伸(stretch)并确保接合处没有间隙。由于antialiasing,各部分之间可能应该有一点重叠。 (这是强制性的)。

Arrow made of slices

编辑:使用 @Turnip 建议的 preserveAspectRatio="none" 正在拉伸(stretch)图像,但它会在某些宽度上产生间隙和跳跃。看这个截图: enter image description here

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

.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>

最佳答案

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

关于html - 非按比例缩放 SVG 图像以适合剩余空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63691837/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com