缩放 svg 图像以适合父级作为 css 背景答案

【问题标题】：Scale svg image to fit parent as css background缩放 svg 图像以适合父级作为 css 背景
【发布时间】：2014-11-30 12:57:28
【问题描述】：

我希望将 svg 图像按如下方式缩放：

右箭头（以红色绘制）应始终缩放到可以具有动态高度的蓝色框的高度。

我已经尝试使用 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 背景来实现这一点？

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

【问题讨论】：

标签： html css svg

【解决方案1】：

要使您的红色箭头拉伸以匹配高度，请尝试preserveAspectRatio="none"。

【讨论】：