Question

我有这个SVG文件：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
    <!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
]>
<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     x="0px" y="0px" width="1px" height="100%" viewBox="64 0 1 26" enable-background="new 64 0 1 26" xml:space="preserve">
<defs>
</defs>
<path id="Outer_dark_border_1_" opacity="0.8" fill="#2F5870" d="M244,0H12C5.373,0,0,5.373,0,12v218v14v12h12h232h12v-12v-14V12
    C256,5.373,250.627,0,244,0z M255,225v5v25H1v-25v-5V12.906C1,6.331,6.331,1,12.906,1h230.188C249.669,1,255,6.331,255,12.906V225z"
    />
<path id="Outer_light_border_1_" opacity="0.8" fill="#8DAFC4" d="M243.094,1H12.906C6.331,1,1,6.331,1,12.906V234v9.094V255h11.906
    h230.188H255v-11.906V234V12.906C255,6.331,249.669,1,243.094,1z M254,24v230H2V24V13C2,6.925,6.925,2,13,2h230
    c6.075,0,11,4.925,11,11V24z"/>
<linearGradient id="Top_gradient_2_" gradientUnits="userSpaceOnUse" x1="128" y1="24" x2="128" y2="2">
    <stop  offset="0.48" style="stop-color:#427B9D"/>
    <stop  offset="0.52" style="stop-color:#5D8EAB"/>
</linearGradient>
<path id="Top_gradient_1_" opacity="0.8" fill="url(#Top_gradient_2_)" d="M243,2H13C6.925,2,2,6.925,2,13v11h11h230h11V13
    C254,6.925,249.075,2,243,2z"/>
<path id="Inner_dark_border_1_" opacity="0.8" fill="#2F5870" d="M8,25v223h240V25H8z M247,247H9V26h238V247z"/>
<path id="Inner_light_border_1_" opacity="0.8" fill="#8DAFC4" d="M7,24v225h242V24H7z M248,248H8V25h240V248z"/>
<polygon id="Solid_border_1_" opacity="0.8" fill="#427B9D" points="249,24 249,249 7,249 7,24 2,24 2,254 10,254 254,254 254,246 
    254,24 "/>
<rect id="top_1_" x="64" fill="none" width="1" height="26"/>
</svg>

和这个HTML文件：

<!DOCTYPE html>
<html>
<body>
<div style="background: url(top.svg); width: 900px; height: 100px;">
asd
</div>
</body>
</html>

，结果如下：

(Image link broken) http://img443.imageshack.us/img443/5868/43133737.png

我想要的是SVG伸展到容器。从“asd”可以看出，它只是水平拉伸SVG，并且垂直居中。我试图玩尺寸，我真的不知道如何做到这一点。

所以，要明确：我希望蓝色条填满整个div，以便ASD位于其中。

更新：当我将SVG的高度从height =“100％”更改为height =“26px”时，它看起来像这样：

(Image link broken) http://img199.imageshack.us/img199/3980/98731874.png

我快到了，但仍然不在那里。

当将svg元素的宽度和高度都改为100％时，它看起来像是不正确的：

(Image link broken) http://img295.imageshack.us/img295/5897/90366242.png

Answer 1

我用CSS background-size: 100% 100%解决了我的问题。

适合/拉伸SVG到div背景而无需reescaling

1 个答案: