縮放SVG圖像以適合父級作為CSS背景

Question

我想要一個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背景來實現呢？

編輯：箭頭的寬度應始終保持不變。

Answer 1

要使紅色箭頭拉伸以匹配高度，請嘗試preserveAspectRatio="none" 。