Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
使用SVG Base64 URI的CSS光标图像_Css_Svg - Fatal编程技术网

使用SVG Base64 URI的CSS光标图像

使用SVG Base64 URI的CSS光标图像,css,svg,Css,Svg,因此,我将这个SVG元素编码为Base64: cursor: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEzLjU1N3B4I

因此,我将这个SVG元素编码为Base64:

cursor: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEzLjU1N3B4IiBoZWlnaHQ9IjEyLjI3M3B4IiB2aWV3Qm94PSIwIDAgMTMuNTU3IDEyLjI3MyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTMuNTU3IDEyLjI3MyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTMuMDA4LDEuMTg5YzAuNDgtMC4xNzksMS40MjctMC4wNjksMS42NzcsMC40NzNjMC4yMTMsMC40NjIsMC4zOTYsMS4yNDEsMC40MDYsMS4wNzUgQzUuMTE1LDIuMzY4LDUuMDY3LDEuNTcsNS4yMjgsMS4xNTNjMC4xMTctMC4zMDUsMC4zNDctMC41OSwwLjY4Ni0wLjY5MmMwLjI4NS0wLjA4NSwwLjYyMS0wLjExNCwwLjkxNy0wLjA1NCBjMC4zMTIsMC4wNjQsMC42NDIsMC4yODcsMC43NjUsMC40OTlDNy45NTgsMS41Myw3Ljk2MywyLjgwNiw3Ljk4LDIuNzM3YzAuMDY0LTAuMjcxLDAuMDctMS4yMjksMC4yODMtMS41ODQgQzguNDA0LDAuOTE4LDguNzYsMC43MDgsOC45NTEsMC42NzVjMC4yOTQtMC4wNTMsMC42NTUtMC4wNjgsMC45NjQtMC4wMDhjMC4yNDksMC4wNDksMC41ODYsMC4zNDQsMC42NzcsMC40ODYgYzAuMjE5LDAuMzQ0LDAuMzQyLDEuMzE2LDAuMzc5LDEuNjU4YzAuMDE2LDAuMTQxLDAuMDc0LTAuMzk0LDAuMjkzLTAuNzM2YzAuNDA2LTAuNjM5LDEuODQ0LTAuNzY0LDEuODk4LDAuNjM5IGMwLjAyNSwwLjY1NCwwLjAyLDAuNjI1LDAuMDIsMS4wNjRjMCwwLjUxNi0wLjAxMiwwLjgyOC0wLjA0LDEuMjAyYy0wLjAzLDAuMzk5LTAuMTE2LDEuMzA0LTAuMjQxLDEuNzQyIGMtMC4wODYsMC4zMDEtMC4zNzEsMC45NzgtMC42NTIsMS4zODRjMCwwLTEuMDc0LDEuMjUtMS4xOTEsMS44MTJjLTAuMTE3LDAuNTYzLTAuMDc4LDAuNTY3LTAuMTAyLDAuOTY2czAuMTIxLDAuOTIzLDAuMTIxLDAuOTIzIHMtMC44MDIsMC4xMDQtMS4yMzQsMC4wMzRjLTAuMzkxLTAuMDYyLTAuODc1LTAuODQxLTEtMS4wNzhjLTAuMTcyLTAuMzI4LTAuNTM5LTAuMjY2LTAuNjgyLTAuMDIzIGMtMC4yMjUsMC4zODMtMC43MDksMS4wNy0xLjA1MSwxLjExM2MtMC42NjksMC4wODQtMi4wNTUsMC4wMy0zLjE0LDAuMDJjMCwwLDAuMTg1LTEuMDExLTAuMjI3LTEuMzU3IGMtMC4zMDUtMC4yNi0wLjgzLTAuNzg0LTEuMTQ0LTEuMDYxTDEuNzY2LDguNTMzQzEuNDgzLDguMTc0LDAuNzY0LDcuNjA0LDAuNTIzLDYuNTQ5QzAuMzEsNS42MTIsMC4zMzEsNS4xNTMsMC41Niw0Ljc3OCBDMC43OTIsNC4zOTcsMS4yMyw0LjE5LDEuNDE0LDQuMTUzYzAuMjA4LTAuMDQxLDAuNjkyLTAuMDM5LDAuODc1LDAuMDYyYzAuMjIzLDAuMTIzLDAuMzEzLDAuMTU4LDAuNDg4LDAuMzkxIGMwLjIzLDAuMzA3LDAuMzEyLDAuNDU2LDAuMjEzLDAuMTIxQzIuOTE0LDQuNDY2LDIuNjY4LDQuMTMyLDIuNTU2LDMuNzU3Yy0wLjEwOS0wLjM2MS0wLjQwMS0wLjk0MS0wLjM4LTEuNTI1IEMyLjE4NCwyLjAxMSwyLjI3OSwxLjQ2LDMuMDA4LDEuMTg5Ii8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDEwMTAxIiBzdHJva2Utd2lkdGg9IjAuNzUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0zLjAwOCwxLjE4OSBjMC40OC0wLjE3OSwxLjQyNy0wLjA2OSwxLjY3NywwLjQ3M2MwLjIxMywwLjQ2MiwwLjM5NiwxLjI0MSwwLjQwNiwxLjA3NUM1LjExNSwyLjM2OCw1LjA2NywxLjU3LDUuMjI4LDEuMTUzIGMwLjExNy0wLjMwNSwwLjM0Ny0wLjU5LDAuNjg2LTAuNjkyYzAuMjg1LTAuMDg1LDAuNjIxLTAuMTE0LDAuOTE3LTAuMDU0YzAuMzEyLDAuMDY0LDAuNjQyLDAuMjg3LDAuNzY1LDAuNDk5IEM3Ljk1OCwxLjUzLDcuOTYzLDIuODA2LDcuOTgsMi43MzdjMC4wNjQtMC4yNzEsMC4wNy0xLjIyOSwwLjI4My0xLjU4NEM4LjQwNCwwLjkxOCw4Ljc2LDAuNzA4LDguOTUxLDAuNjc1IGMwLjI5NC0wLjA1MywwLjY1NS0wLjA2OCwwLjk2NC0wLjAwOGMwLjI0OSwwLjA0OSwwLjU4NiwwLjM0NCwwLjY3NywwLjQ4NmMwLjIxOSwwLjM0NCwwLjM0MiwxLjMxNiwwLjM3OSwxLjY1OCBjMC4wMTYsMC4xNDEsMC4wNzQtMC4zOTQsMC4yOTMtMC43MzZjMC40MDYtMC42MzksMS44NDQtMC43NjQsMS44OTgsMC42MzljMC4wMjUsMC42NTQsMC4wMiwwLjYyNSwwLjAyLDEuMDY0IGMwLDAuNTE2LTAuMDEyLDAuODI4LTAuMDQsMS4yMDJjLTAuMDMsMC4zOTktMC4xMTYsMS4zMDQtMC4yNDEsMS43NDJjLTAuMDg2LDAuMzAxLTAuMzcxLDAuOTc4LTAuNjUyLDEuMzg0IGMwLDAtMS4wNzQsMS4yNS0xLjE5MSwxLjgxMmMtMC4xMTcsMC41NjMtMC4wNzgsMC41NjctMC4xMDIsMC45NjZzMC4xMjEsMC45MjMsMC4xMjEsMC45MjNzLTAuODAyLDAuMTA0LTEuMjM0LDAuMDM0IGMtMC4zOTEtMC4wNjItMC44NzUtMC44NDEtMS0xLjA3OGMtMC4xNzItMC4zMjgtMC41MzktMC4yNjYtMC42ODItMC4wMjNjLTAuMjI1LDAuMzgzLTAuNzA5LDEuMDctMS4wNTEsMS4xMTMgYy0wLjY2OSwwLjA4NC0yLjA1NSwwLjAzLTMuMTQsMC4wMmMwLDAsMC4xODUtMS4wMTEtMC4yMjctMS4zNTdjLTAuMzA1LTAuMjYtMC44My0wLjc4NC0xLjE0NC0xLjA2MUwxLjc2Niw4LjUzMyBDMS40ODMsOC4xNzQsMC43NjQsNy42MDQsMC41MjMsNi41NDlDMC4zMSw1LjYxMiwwLjMzMSw1LjE1MywwLjU2LDQuNzc4QzAuNzkyLDQuMzk3LDEuMjMsNC4xOSwxLjQxNCw0LjE1MyBjMC4yMDgtMC4wNDEsMC42OTItMC4wMzksMC44NzUsMC4wNjJjMC4yMjMsMC4xMjMsMC4zMTMsMC4xNTgsMC40ODgsMC4zOTFjMC4yMywwLjMwNywwLjMxMiwwLjQ1NiwwLjIxMywwLjEyMSBDMi45MTQsNC40NjYsMi42NjgsNC4xMzIsMi41NTYsMy43NTdjLTAuMTA5LTAuMzYxLTAuNDAxLTAuOTQxLTAuMzgtMS41MjVDMi4xODQsMi4wMTEsMi4yNzksMS40NiwzLjAwOCwxLjE4OXoiLz48bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiMwMTAxMDEiIHN0cm9rZS13aWR0aD0iMC43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiB4MT0iMTAuMDAxIiB5MT0iOC44ODgiIHgyPSIxMC4wMDEiIHkyPSI1LjQyOSIvPjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAxMDEwMSIgc3Ryb2tlLXdpZHRoPSIwLjc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHgxPSI3Ljk4NiIgeTE9IjguODk5IiB4Mj0iNy45NyIgeTI9IjUuNDI3Ii8+PGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDEwMTAxIiBzdHJva2Utd2lkdGg9IjAuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgeDE9IjUuOTkiIHkxPSI1LjQ1OCIgeDI9IjYuMDExIiB5Mj0iOC44ODQiLz48L3N2Zz4=), auto;
但是这个特定的版本data:image/svg+xml似乎不起作用。如果我使用它作为背景,它会,但我似乎无法让它为光标工作


有什么想法或见解可以解释为什么这不起作用吗?

您使用的是哪种web浏览器?您的代码在Google Chrome中运行良好

根据目前的规范,它也应该在Firefox中工作


我猜你正在使用Internet Explorer?根据IEAT的文档,
游标:url(uri)属性必须是.cur或.ani文件。它看起来不支持SVG游标,除了通过SVGCursorElement在SVG文件中(有关详细信息,请参阅)。

Hmmm。。。可能是我的dom元素没有任何宽度或高度的问题。谢谢你的精神检查。很高兴知道我在正确的轨道上。:)