gpt4 book ai didi

html - 缩放 svg 图像以适合父级作为 css 背景

转载 作者:太空宇宙 更新时间:2023-11-04 12:49:51 24 4
gpt4 key购买 nike

我想要一个按如下方式缩放的 svg 图像:

sketch

右箭头(涂成红色)应始终缩放到蓝色框的高度,蓝色框可以具有动态高度。

我尝试使用 svg 图像实现它:

   <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 50 100" preserveAspectRatio="xMidYMid meet">
<polygon points="0,0 50,50 0,100" style="fill:white" />
</svg>

我尝试了不同版本的 preserveAspectRatio 和 viewBox。

我的css实现是这样的

#before-main section header.section-header .header-arrow {
position:absolute;
right:0;
height:100%;
width:4.1%;
background:url("../img/headlineArrow_bg.svg") no-repeat right center;
background-size:100% 100%;
}

HTML 看起来像

<header class="section-header">
<div class="header-arrow">
</div>
</header>

有没有办法使用 svg 图像作为 css 背景来实现这一点?

编辑:箭头的宽度应始终保持不变。

最佳答案

要使红色箭头拉伸(stretch)以匹配高度,请尝试 preserveAspectRatio="none"

关于html - 缩放 svg 图像以适合父级作为 css 背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26213302/

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