我可以使用svg圖像（即xml）作為列表樣式圖像CSS屬性嗎？

Question

我想將單個文件網頁分發給同事，即沒有外部圖形/ js / css。 在html文件中，我需要更改所有列表的list-style-image屬性，在這種情況下，需要用圖像替換項目符號。 我知道我可以通過以下方式將圖形作為data：url插入

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.132103" 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本身而不是data：版本，因為這將允許我直接在svg中修改圖像，而不是修改，轉換為原始數據版本，然后更新data：url 。

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

最好的祝福，

科姆

PS我最初的問題是有限的。 我之所以在svg中提到圖片，是因為我對如何在html文檔中創建圖片的知識有限。

我的解決方案是使用html5畫布而不是svg圖像，即在javascript中為Bulet列表繪制圖像/圖標。 完成此操作后，例如在具有id =“ plus”的畫布中，我可以創建一個網址，例如

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

然后我可以隨意修改圖像，例如

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

Answer 1

您甚至可以使用<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" />

例如：-