我使用 svg 图像作为背景，并通过背景大小拉伸 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 中，宽度和高度都在拉伸。我只想拉伸宽度。
【问题讨论】：
标签： html css google-chrome svg
也许将 preserveAspectRatio="none" 添加到 SVG 文件中的打开标签会有所帮助？
<?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>
【讨论】：
我没有足够的声望来点赞或发表评论，所以只能再次回答。我通过添加 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">
【讨论】：
这是一个 Chrome 错误。实际上是回归。
【讨论】：
preserveAspectRatio="none" 确实有帮助。
不要使用背景尺寸。您需要做的是在您的 SVG 文件中为宽度、高度和 preserveAspectRatio 设置以下值。
<svg width="100%" height="100%" preserveAspectRatio="xMidYMid slice" viewBox="..." />
请注意，为了使其工作，您的 SVG 还需要有一个有效的 viewBox。它看起来确实如此。
【讨论】：
我认为从技术上讲，chrome 在这个上是正确的，您需要将背景大小值调整为您真正想要的值。将它们保持在 100% 会强制纵横比保持不变。
【讨论】：