11

背景として svg 画像を使用しており、background-size で SVG 画像を引き伸ばしています。幅だけ伸ばしたいです。Firefox、IE9 +、クロムでは完全に正常に動作します。どうすればそれを達成できるか教えてください。

.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でサイズを変更すると幅が伸びるだけですが、クロムでは幅と高さの両方が伸びます。幅だけ伸ばしたい。

4

5 に答える 5

20

SVG ファイルの open タグに 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 の例

于 2013-07-05T15:39:05.357 に答える
1

background-size を使用しないでください。SVG ファイルの width、height、preserveAspectRatio に次の値を設定する必要があります。

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

これが機能するためには、SVG に有効な viewBox も必要であることに注意してください。それはそうであるように見えます。

于 2013-07-10T15:51:21.053 に答える
1

Chrome のバグです。実際、回帰。

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

于 2013-08-02T17:57:41.697 に答える
0

技術的にはクロムはこれで正しいと思います。背景サイズの値を実際に必要なものに調整する必要があります。それらを 100% に維持すると、アスペクト比が一定に保たれます。

于 2013-07-05T14:58:59.387 に答える