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

I want to distribute a single file webpage to colleagues, i.e. no external graphics/js/css. In the html file, I need to change the list-style-image attributes for all lists, in this case to replace the bullet by an image. I know I can do this by inserting the graphic as a data:url as below

我想将一个文件网页分发给同事,即没有外部图形/ js / css。在html文件中,我需要更改所有列表的list-style-image属性,在这种情况下,用图像替换项目符号。我知道我可以通过将图形作为数据插入来实现:url如下所示

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

The above graphic is from an svg file, where the original svg is

上图来自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>

I'd prefer to be able to reference the svg itself rather than the data: version of it, as this would allow me to directly modify the image in svg rather than modifying, trasnforming to the raw data version and then updating the data:url.

我更喜欢能够引用svg本身而不是数据:它的版本,因为这将允许我直接修改svg中的图像而不是修改,转换为原始数据版本然后更新数据:url 。

Is it possible to reference an the SVG graphic in the css attribute ?

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

Best regards,

Colm

P.S. My original question was a bit limited. I mentioned an image in svg due to my limited knowledge for how images can be created within a html document.

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

My solution is to use a html5 canvas instead of an svg image, i.e. draw the image/icon for the bulet list in javascript. Once this is done, e.g. in a canvas with id="plus" I can then create a url e.g.

我的解决方案是使用html5画布而不是svg图像,即在javascript中绘制bulet列表的图像/图标。一旦完成,例如,在id =“plus”的画布中我可以创建一个url,例如

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

and then I could modify the image at will, e.g.

然后我可以随意修改图像,例如

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

1 个解决方案

#1

You can use even <img> tag

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

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

You can create .svg file by copying svg code and paste it in any text editor, then save it as .svg.

您可以通过复制svg代码创建.svg文件并将其粘贴到任何文本编辑器中,然后将其另存为.svg。

Refer http://css-tricks.com/using-svg/ for more methods

有关更多方法,请参阅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" />

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

#1