Windows上的Safari - CSS背景的大小和位置與SVG梯度

無論我怎麼努力，我不能在Windows上獲得這個SVG梯度在最近的Safari瀏覽器正常工作（5.1.7）：Windows上的Safari - CSS背景的大小和位置與SVG梯度

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1920 200"> 
    <linearGradient id="g186" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0" y2="200"> 
     <stop stop-color="#0A306A" offset="0"/><stop stop-color="#030C1B" offset="1"/> 
    </linearGradient> 
    <rect x="0" y="0" width="1920" height="200" fill="url(#g186)" /> 
</svg>`

的jsfiddle：
http://jsfiddle.net/wumnb/1/（請注意，瀏覽器可能會拋出一個XSS警告，因爲base64編碼的SVG）

當我包括-webkit-background-size: 100% 200px;用和/或不-webkit-，它重新大小的SVG，但它看起來比其他瀏覽器輕得多;就好像它將SVG的整頁版從頂部切到200px一樣。

我試過了兩個答案other兩個questions我可以找到，但都沒有工作。

來源

2013-07-10 ITS Alaska

事實證明，preserveAspectRatio="none"需要preserveAspectRatio="xMidYMax meet"與viewbox設置爲所需的尺寸。可悲的是，這不允許百分比，但總比沒有好。

W3 documentation for preserveAspectRatio。

編輯：在玩這個更多的時候，我發現Safari的背景位置真的很奇怪。 preserveAspectRatio的xM（in | id | ax）yM（in | id | ax）部分似乎決定了SVG在頁面上的位置，而不是W3上描述的內容。

似乎（至少對我來說），該xMidYMax是background-position: center bottom;等效和xMinyMin是background-position: center top;

等效

來源

2013-07-10 18:51:40

Windows上的Safari - CSS背景的大小和位置與SVG梯度

回答

相關問題