如何應用SVG，使其能夠在IE背景圖片中工作

我的問題與this post中的問題討論類似。背景圖像適用於所有其他瀏覽器，包括IE10，但在IE10下無法使用。在閱讀該文章後，我爲IE10創建了一個SVG格式的背景圖片。現在，我不知道如何將其應用於我的CSS。如何應用SVG，使其能夠在IE背景圖片中工作

CSS

.bg-secondary { 
     background: url(../img/design/bg-secondary.jpg) no-repeat top center; 
     -webkit-background-size: 100% auto; 
     -moz-background-size: 100% auto; 
     -o-background-size: 100% auto; 
     background-size: 100% auto; 
     min-height: 605px; 
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/design/bg-secondary.svg', sizingMethod='scale'); 
    }

來源

2014-04-01 Navneil Naicker

您可以使用多背景的CSS技術在這裏：

.bg-secondary { 
    background-image: url(fallback.png); 
    background-image: url(image.svg), none; 
    ----- 
    ----- 
    }

這工作，因爲它只是恰巧，對SVG 和多瀏覽器支持-backgrounds非常相似。如果支持多個背景，瀏覽器將使用第二個聲明（使用SVG），否則會回到第一個聲明（使用PNG）。

更新時間：

<svg width="--" height="--"> 
    <image xlink:href="your.svg" src="svg.png" width="--" height="--" /> 
</svg>

來源

2014-04-01 01:47:37 newTag

奇怪仍然沒有爲我工作。 –

@NavneilNaicker你可以嘗試使用更新的格式嗎？它不是作爲背景圖像應用，但仍然檢查，因爲我目前沒有IE瀏覽器。 – newTag

出於安全原因，大多數瀏覽器不允許img元素和css（後臺）圖像加載額外的外部資源。我的猜測是，IE也會阻止這樣的引用，這意味着在示例''裏面不會顯示圖像（除非可能將其編碼爲數據uri）。您可以將替換爲，以測試svg本身是否正確加載。 –

試試這個，如果有幫助...

<svg height="--px" width="--px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
              <image width="100%" height="100%" xlink:href="imagefilehere.svg"/> 
            </svg>

來源

2014-04-01 03:19:32 Sai

如何應用SVG，使其能夠在IE背景圖片中工作

回答

相關問題