如何让SVG向左和向右拉伸，同时保持中间的纵横比？
如何让SVG向左和向右拉伸，同时保持中间的纵横比？
提问于 2019-09-20 03:30:09
我有一个由三部分组成的SVG。我想把左右两部分无限拉伸，但中间部分保持不变。
这是一个插图。
我想我的答案就在SVG的viewbox标签preserveAspectRatio属性附近。虽然我还没有和他们合作过，但我可以在正确的方向上加以推动。
下面是未拉伸的SVG的代码，我想我需要以某种方式使用视图框来增强它，以达到所需的拉伸效果。
<svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<line y1="0.5" x2="32" y2="0.5" stroke="#FF0000"/>
<line x1="16" y1="8.5" x2="32" y2="8.5" stroke="#00FF00"/>
<line x1="16" y1="16.5" x2="48" y2="16.5" stroke="#0000FF"/>
</svg>下面是代码实验的代码：https://codepen.io/jaanus1/pen/aboQpeB
回答 1
Stack Overflow用户
发布于 2019-09-20 03:44:47
Set：width="100%" height="100%" preserveAspectRatio="none"
<svg width="100%" height="100%" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<line y1="0.5" x2="32" y2="0.5" stroke="#FF0000"/>
<line x1="16" y1="8.5" x2="32" y2="8.5" stroke="#00FF00"/>
<line x1="16" y1="16.5" x2="48" y2="16.5" stroke="#0000FF"/>
</svg>
更新
我试着做一个新的选择。
红色和绿色两行包含在一个缩放的SVG块中。绿线进入另一个具有固定大小的SVG块：width="48" height="17"
为了在放大时保持所有线条的宽度相同，我添加了属性vector-effect ="non-scaling-stroke"
.one {
position:relative;
}
.two {
position:absolute;
top:35%;
left:50%;
} <div class="one">
<svg width="100%" height="5%" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<line vector-effect="non-scaling-stroke" y1="0.5" x2="32" y2="0.5" stroke="#FF0000"/>
<line vector-effect="non-scaling-stroke" x1="16" y1="16.5" x2="48" y2="16.5" stroke="#0000FF"/>
</svg>
<div class="two">
<svg width="48" height="17" viewBox="0 0 48 17">
<line x1="16" y1="8.5" x2="32" y2="8.5" stroke="#00FF00"/>
</svg>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58017848
复制相关文章
相似问题
腾讯云开发者
