調整大小SVG圖像作爲chrome瀏覽器

背景我使用SVG圖像作爲背景，我通過後臺尺寸拉伸SVG圖像。我希望它只是寬度明智的。它在firefox，IE9 +，但鉻合金工作得很好。請建議我如何實現它。調整大小SVG圖像作爲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調整僅寬度伸展但在鉻寬度和高度被拉伸。我只想寬度拉伸。

來源

2013-07-05 PRAH

[background-size：100％100％;在Chrome瀏覽器中無法正常工作]（http://stackoverflow.com/questions/9334095/background-size100-100-doesnt-work-properly-in-chrome） – Pikamander2

我覺得技術上鉻是正確的就這一個，你需要你的背景，大小值調整到你真正想要的東西。將它們保持在100％是迫使縱橫比保持不變。

來源

2013-07-05 14:58:59 dezman

如果你的答案包含了代碼OP想要的方式。 – cimmanon

我已經指定了42px的高度和背景大小的高度也是100％，所以爲什麼高度拉伸。哦另一方面firefox正在工作，我想要的。 – PRAH

也許將preserveAspectRatio =「無」來打開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>

JSBin example

來源

2013-07-05 15:39:05

只需增加縱橫比，就可以在Chrome中完美工作。 +1 –

伊利亞Streltsyn我愛你...你認真可能只是救了我的生活，太感謝你了！ – Scdev

不要使用背景大小。你需要做的是在SVG文件中爲width，height和preserveAspectRatio提供以下值。

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

請注意，爲了使其工作，您的SVG還需要有一個有效的viewBox。它看起來確實如此。

來源

2013-07-10 15:51:21

這是Chrome錯誤。實際上回歸。

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

來源

2013-08-02 17:57:41 WGH

在可能的情況下，雖然設置'preserveAspectRatio =「無」'確實幫助。 – WGH

我沒有足夠的聲譽給予好評或評論，所以只能再回答它會奏效。我通過添加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">

來源

2014-09-02 19:58:20

調整大小SVG圖像作爲chrome瀏覽器

回答

相關問題