我有这个 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>
结果是这样的:
我想要的是将 SVG 拉伸(stretch)到容器中。正如您从“asd”中看到的那样，它仅水平拉伸(stretch) SVG，并垂直居中。我尝试过使用维度，但我真的不知道如何实现。
所以，要明确一点:我希望蓝色条填满整个 div，以便 ASD 位于其顶部。
更新:当我将 SVG 的高度从 height="100%"更改为 height="26px"时，它看起来像这样:
我快到了，但还没有到。
当将 svg 元素的宽度和高度都更改为 100% 时，它看起来像这样，这是不正确的:
最佳答案
我用 CSS background-size: 100% 100% 解决了我的问题。
关于css - 适合/拉伸(stretch) SVG 到 div 背景而不重新缩放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3220417/