縮放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和視框。

我的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"。