0
我想有一個SVG圖像縮放如下:縮放SVG圖像以適合家長爲CSS背景
右箭頭(漆成紅色)應始終擴展到的高度藍色的盒子,可以有動態的高度。
我曾嘗試使用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背景的方法嗎?
編輯:箭頭的寬度應始終保持不變。
奇怪,之前嘗試過,但現在它工作。謝謝。 – flix 2014-10-06 12:11:32