SVG背景重複之間的空白

我似乎無法擺脫由Illustrator CS5導出的SVG元素重複（作爲CSS背景）之間的空白區域。SVG背景重複之間的空白

我正在使用一個簡單的CSS background-image和background-repeat: repeat-x但每個重複之間總是有這個空格。我根本不使用background-size。

這是我所看到的（在Safari瀏覽器測試/鉻）：

white space

添加，如果我打開SVG檢查邊上的任何空白，無所不有（見窗口上的右）和它去一路窗口的一面：

no white space on separate window

我試着通過File -> Scripts -> SaveDocsAsSVG和Save as.. -> SVG保存在Illustrator圖像。

我不知道還有什麼要嘗試在這一點上。有任何想法嗎？

編輯：發佈一些代碼..

<body> 
    <div class="outer"> 
     <div class="inner"> 
     </div> 
    </div> 
</body>

而且基本的CSS：

.outer { 
    background-color: #7fcefb; 
    height: 700px; 
    background-image: url('/wp-content/themes/grizzly/assets/img/trees.png'); 
    background-position: center 95%; 
    background-repeat: repeat-x; 
} 

.inner { 
    background-image: url('/wp-content/themes/grizzly/assets/svg/treeshill.svg'); 
    height: 700px; 
    background-position: center bottom; 
    background-repeat: repeat-x; 
}

來源

2015-02-10 roflmyeggo

您可以發佈您的代碼或鏈接？它看起來可能會有一些微小的餘量或填充。 – user3781632 2015-02-10 01:24:30

你可以發佈圖片鏈接嗎？ – 2015-02-10 01:28:42

添加了一些基本的HTML和CSS來顯示設置。 SVG下載 - http://s000.tinyupload.com/?file_id=02705325478483063668 – roflmyeggo 2015-02-10 01:43:51

如果它是什麼，我覺得是，打開您的SVG文件並更改根<svg>元素，以便它包括以下屬性：

<svg ... preserveAspectRatio="none">

如果它已經有preserveAspectRatio屬性，只需將其更改爲"none"並重新加載即可。

來源

2015-02-10 01:45:04

保羅 - 你是男人！謝謝！這是否需要添加，因爲瀏覽器會自動修改縱橫比？ – roflmyeggo 2015-02-10 02:33:38

這將是因爲''width' /'height'屬性的寬高比和'viewBox'屬性中的寬度和高度值之間存在細微的差異。 – 2015-02-10 02:41:14

啊，有道理！再次感謝。乾杯。 – roflmyeggo 2015-02-10 02:42:29

preserveAspectRatio="none"沒有爲我工作，因爲它使svg採取其父容器的全寬。

取而代之的是使用的參數：preserveAspectRatio="xMinYMax meet"這回我能在這裏與background-repeat: repeat-x;

使用更多的信息是方位的文章：A Look At preserveAspectRatio in SVG

來源

2015-11-20 19:47:50

With'preserveAspectRatio =「xMinYMax meet」'我仍然看到差距。雖然'preserveAspectRatio =「xMinYMax切片」'爲我工作。 – borisdiakur 2016-01-31 22:13:28

SVG背景重複之間的空白

回答

相關問題