在Chrome浏览器中将SVG图像调整大小作为背景

Question

我正在使用SVG图像作为背景，并通过background-size拉伸SVG图像。我只希望它在宽度方面进行拉伸。在Firefox、IE9+中表现得非常好，但是在Chrome中不行。请告诉我如何实现。

.homecallouts ul li {
background-image: url('blue_arow_callout.svg');
background-size: 100% 100%;
width: 21%;
height: 42px;

查看jsbin代码http://jsbin.com/uvijuc/4/

在Firefox中，当我调整大小时只有宽度会伸展，但在Chrome中宽度和高度都会伸展。我只希望宽度能够伸展。

- PRAH

---

可能是重复的问题：background-size:100% 100%;在Chrome中无法正常工作。 - Pikamander2

Answer 1

或许在SVG文件的<svg>标签中添加preserveAspectRatio="none"属性可能会有所帮助？

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="282.05px" height="61.974px" viewBox="286.287 26.514 282.05 61.974" enable-background="new 286.287 26.514 282.05 61.974"
     xml:space="preserve" preserveAspectRatio="none">
<polygon fill="#0063AF" points="538.337,26.514 286.287,26.514 316.287,57.5 286.287,88.488 538.337,88.488 568.337,57.5 "/>
</svg>

JSBin示例

- Ilya Streltsyn

---

Ilya Streltsyn 我爱你... 说真的，你可能刚刚拯救了我的生命，非常感谢你！！！ - Scdev

Answer 2

我没有足够的声望来点赞或评论，所以只能再次回答。我通过添加 preserveAspectRatio="none" 来解决了类似的问题。

<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="591.42859"
height="250.24918"
id="svg2"
version="1.1"
preserveAspectRatio="none"
inkscape:version="0.48.2 r9819"
sodipodi:docname="background.svg">

- Bart McLeod

Answer 3

这是一个Chrome浏览器的bug，事实上是回归性的。

http://code.google.com/p/chromium/issues/detail?id=113414

- WGH

---

在我的情况下，将 preserveAspectRatio="none" 设置为有帮助。 - WGH

Answer 4

不要使用background-size。你需要在SVG文件中设置以下宽度、高度和preserveAspectRatio的值。

<svg width="100%" height="100%" preserveAspectRatio="xMidYMid slice" viewBox="..." />

请注意，为了使此功能正常工作，您的SVG还需要具有有效的viewBox。它似乎已经做到了。

- Paul LeBeau

Answer 5

我认为从技术上讲，Chrome 是正确的，你需要将 background-size 值调整为实际需要的大小。保持它们为 100% 会强制保持纵横比不变。

- dezman

---

如果您的回答包含了代码，以满足提问者的需求，那将非常有帮助。 - cimmanon

我已经指定了42像素的高度和背景大小高度也是100%，为什么高度会被拉伸。另一方面，Firefox正在按照我想要的方式工作。 - PRAH