我可以使用svg图像（即xml）作为列表样式图像CSS属性吗？

Question

我想向同事分发单个文件网页，即没有外部图形/ js / css。 在html文件中，我需要更改所有列表的list-style-image属性，在这种情况下，用图像替换项目符号。 我知道我可以通过将图形作为数据插入来实现：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本身而不是数据：它的版本，因为这将允许我直接修改svg中的图像而不是修改，转换为原始数据版本然后更新数据：url。

是否可以在css属性中引用SVG图形？

致以最诚挚的问候，

科尔姆

P.S。我原来的问题有点受限。我在svg中提到了一个图像，因为我对如何在html文档中创建图像知之甚少。

我的解决方案是使用html5画布而不是svg图像，即在javascript中绘制bulet列表的图像/图标。 一旦完成，例如在画布中，id =＆＃34;加上＆＃34;然后，我可以创建一个网址，例如

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" />

如： -