我可以使用svg圖像（即xml）作爲list-style-image CSS屬性嗎？

我想將單個文件網頁分發給同事，即沒有外部圖形/ js/css。在html文件中，我需要更改所有列表的列表樣式圖像屬性，在這種情況下用圖像替換子彈。我知道我可以通過插入圖形作爲數據做到這一點：網址如下我可以使用svg圖像（即xml）作爲list-style-image CSS屬性嗎？

 
    ul { 
    list-style-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPCEtLSBDcmVhdGVkIHdpdGggU1ZHLWVkaXQgLSBodHRwOi8vc3ZnLWVkaXQuZ29vZ2xlY29kZS5jb20vIC0tPgoKIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8Y2lyY2xlIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtZGFzaGFycmF5PSJudWxsIiBzdHJva2UtbGluZWpvaW49Im51bGwiIHN0cm9rZS1saW5lY2FwPSJudWxsIiBmaWxsLW9wYWNpdHk9IjAiIGN4PSIxMC4xMzIxMDMiIGN5PSI5Ljg2Njk4NyIgcj0iNi42ODk0NTMiIGlkPSJzdmdfMiIvPgogIDxsaW5lIGlkPSJzdmdfMyIgeTI9IjEzLjY3NjQ2OSIgeDI9IjEwLjIzMzMzMyIgeTE9IjUuNTU4ODIyIiB4MT0iMTAuMjMzMzMzIiBmaWxsLW9wYWNpdHk9IjAiIHN0cm9rZS1saW5lY2FwPSJudWxsIiBzdHJva2UtbGluZWpvaW49Im51bGwiIHN0cm9rZS1kYXNoYXJyYXk9Im51bGwiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSIjMDAwMDAwIiBmaWxsPSJub25lIi8+CiAgPGxpbmUgaWQ9InN2Z181IiB5Mj0iOS43OTQxMTYiIHgyPSIxNC4yMTc2NDgiIHkxPSI5Ljc5NDExNiIgeDE9IjUuOTgyMzUzIiBmaWxsLW9wYWNpdHk9IjAiIHN0cm9rZS1saW5lY2FwPSJudWxsIiBzdHJva2UtbGluZWpvaW49Im51bGwiIHN0cm9rZS1kYXNoYXJyYXk9Im51bGwiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSIjMDAwMDAwIiBmaWxsPSJub25lIi8+CiA8L2c+Cjwvc3ZnPg=='); 
    }

上述的圖案是從SVG文件，其中原SVG是

<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> 
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> 

<g> 
    <title>Layer 1</title> 
    <circle fill="none" stroke="#000000" stroke-width="2" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" cx="10.3" cy="9.766961" r="6.589453" id="svg_2"/> 
    <line id="svg_3" y2="13.676469" x2="10.233333" y1="5.558822" x1="10.233333" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="2" stroke="#000000" fill="none"/> 
    <line id="svg_5" y2="9.794116" x2="14.217648" y1="9.794116" x1="5.982353" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="2" stroke="#000000" fill="none"/> 
</g> 
</svg>

我寧願以便能夠引用svg本身而不是數據：它的版本，因爲這將允許我直接修改svg中的圖像而不是修改，轉換爲原始數據版本，然後更新數據：url。

是否可以在css屬性中引用SVG圖形？

最好的問候，

科爾姆

附：我原來的問題有點有限。由於我對如何在html文檔中創建圖像的知識有限，我在svg中提到了一幅圖像。

我的解決方案是使用html5畫布而不是svg圖像，即在javascript中爲bulet列表繪製圖像/圖標。一旦完成，例如在id =「plus」的畫布中，我可以創建一個URL，例如

var plusCanvas = document.getElementById('plus'); 
imgplus = "url(" + plusCanvas.toDataURL() + ")";

然後我可以隨意修改圖片，例如，

$(this).css('list-style-image', imgplus)

來源

2014-10-06 carbontracking

請注意：我想一個文件網頁發給同事，即無需外接顯卡/ JS/CSS。我已經得到了兩個解釋如何引用外部文件的答案，但這不是我所要求的。 – carbontracking 2014-10-06 14:40:22

在這種情況下，你不能這樣做。圖像必須是完整的文件。 http://www.w3.org/TR/SVG/struct.html#ImageElement與'use'不同，'image'元素不能引用SVG文件中的元素。 – 2014-10-06 17:30:35

我原來的問題有點有限。由於我對如何在html文檔中創建圖像的知識有限，我在svg中提到了一幅圖像。 – carbontracking 2014-10-10 14:23:19

可以使用甚至<img>標籤

<img src="image.svg" alt="blah blah blah blah" />

您可以通過複製SVG代碼創建.svg文件，並將其粘貼到任何文本編輯器，然後將其保存爲.SVG。

參考http://css-tricks.com/using-svg/更多的方法

<img src="https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg" alt="blah blah blah blah" />

如： - blah blah blah blah

來源

2014-10-06 12:48:41

感謝您的回答，但我不想要外部圖形文件，請參閱原文。 – carbontracking 2014-10-06 14:41:59

我可以使用svg圖像（即xml）作爲list-style-image CSS屬性嗎？

回答

相關問題