我可以使用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属性吗？

回答

相关问题