在Chrome浏览器中将svg图像调整为背景 [英] Resize svg image as background in chrome browser

问题描述

我使用svg图像作为背景，我通过背景大小拉伸SVG图像。我想要它只是宽松明智。它的工作完美地在firefox，IE9 +，但铬。请建议我如何实现它。

I am using svg image as background and I am stretching SVG image through background-size. I want it to be strech only width wise. Its working perfectly fine in firefox, IE9 + but chrome. Please suggest me how i can achieve it.

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

请参阅jsbin代码
http://jsbin.com/uvijuc/4/

see the jsbin code http://jsbin.com/uvijuc/4/

当我调整大小在Firefox只有宽度拉伸，但在chrome的两个宽度和高度是伸展。

when i resize in firefox only width stretch but in chrome both width and height are stretching. I want only width to stretch.

推荐答案

也许添加preserveAspectRatio =none打开SVG文件中的标签可能有帮助？ / p>

Maybe adding preserveAspectRatio="none" to open tag in the SVG file could help?

<?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示例

这篇关于在Chrome浏览器中将svg图像调整为背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！