问题描述
我有这个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拉伸到容器上.从"asd"中可以看到，它仅水平拉伸SVG，而垂直居中.我试图尝试各种尺寸，但我真的不知道如何实现.
What I want is the SVG to stretch to the container. As you can see from the "asd", it only stretches the SVG horizontally, and centers vertically. I have tried to play around with dimensions and I have really no idea how to accomplish this.
因此，要明确一点:我希望蓝色条填充整个div，以便ASD位于其顶部.
So, to be clear: I want the blue bar to fill the entire div, so that ASD is in the top of it.
更新:当我将SVG的高度从height ="100％"更改为height ="26px"时，它看起来像这样:
Update: when I change the height of the SVG from height="100%" to height="26px", then it looks like this:
我快到了，但仍然不在那儿.
I am almost there, but still not there.
，并且将svg元素的宽度和高度都更改为100％时，看起来像这样，这是不正确的:
and when changing width and height of svg element both to 100%, it looks like this which is not correct:
推荐答案
我用CSS background-size: 100% 100%解决了我的问题.
I solved my problem with CSS background-size: 100% 100%.
这篇关于适合/拉伸SVG到div背景，而无需重新缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！