可以在html頁面中嵌入svg中的樣式標籤和xml嗎？

我已經用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/中的底部情況）

來源

2017-03-29 user31782

可以同時使用內聯svg和css。我建議將所有樣式分組在HTML文檔的頭部，但無論如何它是有效的HTML。 –

@DavidLamponDiestre其實從服務器端添加svgs。我們添加新圖像，後端邏輯用內聯svgs替換'img'標籤。而且我還注意到瀏覽器會自動註釋掉'xml'標籤。 – user31782

我認爲在將html注入svg之前，應該在BE中進行一點清理，以減少爲更好的場景發送的數據。雖然最終的構圖可能不是最好的（因爲我更喜歡至少將所有內聯樣式放在一起），但有效的w3c具有內聯svg和css。 –

您可以參考這些標準的MDN。正如在their SVG style page中給出的那樣，您可以使用它，並且在SVG內部有<style> 標記是有效的。

來源

2017-03-29 09:01:47 John

MDN不是尋找標準的地方。這是開發者文檔。 [SVG標準由W3C維護]（https://www.w3.org/TR/SVG/）。 – phihag

這不是一個HTML文檔，而是一個SVG文檔。

在SVG中，沒有<head>元素，<style>通常直接放置在根元素或<defs>子元素中。

作爲documented in the HTML standard，您可以在HTML中嵌入整個SVG文檔，其中包括<style>。因此，可以將style放置在HTML文件內的SVG文檔中，前提是它們實際上是SVG，即它們的名稱空間是http://www.w3.org/2000/svg。

在HTML中，<style>應該放在<head>（或<noscript>在<head>），根據the HTML standard。

來源

2017-03-29 09:03:01 phihag

我並不是指'svg'標籤裏面的'head'標籤。我的意思是已經在svg標籤內的style標籤可以在包含html文檔的body標籤中看到。而據我所知'body'中'style'標籤無效。 – user31782

我已經修改了答案。通常情況下，「風格」確實處於頭頂，但我無法找到任何跡象表明身體的風格是無效的。你能否提供這樣說的標準的參考？ – phihag

我在w3c驗證器中測試過。將'style'放在'body'裏面會給出錯誤。我記得這一點，因爲前一段時間我正在閱讀有關範圍的風格。 – user31782

可以在html頁面中嵌入svg中的樣式標籤和xml嗎？

回答

相關問題