我已經用Adobe Illustrator生成了一些svgs,並將它們嵌入到我的html頁面中。據我所知,所有style
標籤必須在頭,但這些svgs有自己的style
標籤。以下是一個svg的示例:可以在html頁面中嵌入svg中的樣式標籤和xml嗎?
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 526.6 28.3" style="enable-background:new 0 0 526.6 28.3;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: none;
}
.st1 {
enable-background: new;
}
.st2 {
fill: #009444;
}
</style>
<rect y="2.3" class="st0" width="526.6" height="26" />
</svg>
svg呈現在Firefox和Chrome中。在IE11和Edge中,其中一個svg顯得比其他瀏覽器要小,看起來很完美。我沒有在Safari中檢查,因爲我沒有Mac。我的問題是:
- 根據w3c和瀏覽器兼容性,可以在svg中嵌入svg中的style標籤和xml嗎?
P.S:在我的一個工作中,我看到在EDGE瀏覽器中內嵌svg的問題,當附加了jquery appendTo
。設置爲顯示內聯塊的svgs相互重疊。 (https://anupamkhosla.github.io/marqueedirection/中的底部情況)
可以同時使用內聯svg和css。我建議將所有樣式分組在HTML文檔的頭部,但無論如何它是有效的HTML。 –
@DavidLamponDiestre其實從服務器端添加svgs。我們添加新圖像,後端邏輯用內聯svgs替換'img'標籤。而且我還注意到瀏覽器會自動註釋掉'xml'標籤。 – user31782
我認爲在將html注入svg之前,應該在BE中進行一點清理,以減少爲更好的場景發送的數據。雖然最終的構圖可能不是最好的(因爲我更喜歡至少將所有內聯樣式放在一起),但有效的w3c具有內聯svg和css。 –