使用 SVG Base64 URI 的 CSS 光标图像

Question

所以我将这个 SVG 元素编码为 Base64:

cursor: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEzLjU1N3B4IiBoZWlnaHQ9IjEyLjI3M3B4IiB2aWV3Qm94PSIwIDAgMTMuNTU3IDEyLjI3MyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTMuNTU3IDEyLjI3MyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTMuMDA4LDEuMTg5YzAuNDgtMC4xNzksMS40MjctMC4wNjksMS42NzcsMC40NzNjMC4yMTMsMC40NjIsMC4zOTYsMS4yNDEsMC40MDYsMS4wNzUgQzUuMTE1LDIuMzY4LDUuMDY3LDEuNTcsNS4yMjgsMS4xNTNjMC4xMTctMC4zMDUsMC4zNDctMC41OSwwLjY4Ni0wLjY5MmMwLjI4NS0wLjA4NSwwLjYyMS0wLjExNCwwLjkxNy0wLjA1NCBjMC4zMTIsMC4wNjQsMC42NDIsMC4yODcsMC43NjUsMC40OTlDNy45NTgsMS41Myw3Ljk2MywyLjgwNiw3Ljk4LDIuNzM3YzAuMDY0LTAuMjcxLDAuMDctMS4yMjksMC4yODMtMS41ODQgQzguNDA0LDAuOTE4LDguNzYsMC43MDgsOC45NTEsMC42NzVjMC4yOTQtMC4wNTMsMC42NTUtMC4wNjgsMC45NjQtMC4wMDhjMC4yNDksMC4wNDksMC41ODYsMC4zNDQsMC42NzcsMC40ODYgYzAuMjE5LDAuMzQ0LDAuMzQyLDEuMzE2LDAuMzc5LDEuNjU4YzAuMDE2LDAuMTQxLDAuMDc0LTAuMzk0LDAuMjkzLTAuNzM2YzAuNDA2LTAuNjM5LDEuODQ0LTAuNzY0LDEuODk4LDAuNjM5IGMwLjAyNSwwLjY1NCwwLjAyLDAuNjI1LDAuMDIsMS4wNjRjMCwwLjUxNi0wLjAxMiwwLjgyOC0wLjA0LDEuMjAyYy0wLjAzLDAuMzk5LTAuMTE2LDEuMzA0LTAuMjQxLDEuNzQyIGMtMC4wODYsMC4zMDEtMC4zNzEsMC45NzgtMC42NTIsMS4zODRjMCwwLTEuMDc0LDEuMjUtMS4xOTEsMS44MTJjLTAuMTE3LDAuNTYzLTAuMDc4LDAuNTY3LTAuMTAyLDAuOTY2czAuMTIxLDAuOTIzLDAuMTIxLDAuOTIzIHMtMC44MDIsMC4xMDQtMS4yMzQsMC4wMzRjLTAuMzkxLTAuMDYyLTAuODc1LTAuODQxLTEtMS4wNzhjLTAuMTcyLTAuMzI4LTAuNTM5LTAuMjY2LTAuNjgyLTAuMDIzIGMtMC4yMjUsMC4zODMtMC43MDksMS4wNy0xLjA1MSwxLjExM2MtMC42NjksMC4wODQtMi4wNTUsMC4wMy0zLjE0LDAuMDJjMCwwLDAuMTg1LTEuMDExLTAuMjI3LTEuMzU3IGMtMC4zMDUtMC4yNi0wLjgzLTAuNzg0LTEuMTQ0LTEuMDYxTDEuNzY2LDguNTMzQzEuNDgzLDguMTc0LDAuNzY0LDcuNjA0LDAuNTIzLDYuNTQ5QzAuMzEsNS42MTIsMC4zMzEsNS4xNTMsMC41Niw0Ljc3OCBDMC43OTIsNC4zOTcsMS4yMyw0LjE5LDEuNDE0LDQuMTUzYzAuMjA4LTAuMDQxLDAuNjkyLTAuMDM5LDAuODc1LDAuMDYyYzAuMjIzLDAuMTIzLDAuMzEzLDAuMTU4LDAuNDg4LDAuMzkxIGMwLjIzLDAuMzA3LDAuMzEyLDAuNDU2LDAuMjEzLDAuMTIxQzIuOTE0LDQuNDY2LDIuNjY4LDQuMTMyLDIuNTU2LDMuNzU3Yy0wLjEwOS0wLjM2MS0wLjQwMS0wLjk0MS0wLjM4LTEuNTI1IEMyLjE4NCwyLjAxMSwyLjI3OSwxLjQ2LDMuMDA4LDEuMTg5Ii8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDEwMTAxIiBzdHJva2Utd2lkdGg9IjAuNzUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0zLjAwOCwxLjE4OSBjMC40OC0wLjE3OSwxLjQyNy0wLjA2OSwxLjY3NywwLjQ3M2MwLjIxMywwLjQ2MiwwLjM5NiwxLjI0MSwwLjQwNiwxLjA3NUM1LjExNSwyLjM2OCw1LjA2NywxLjU3LDUuMjI4LDEuMTUzIGMwLjExNy0wLjMwNSwwLjM0Ny0wLjU5LDAuNjg2LTAuNjkyYzAuMjg1LTAuMDg1LDAuNjIxLTAuMTE0LDAuOTE3LTAuMDU0YzAuMzEyLDAuMDY0LDAuNjQyLDAuMjg3LDAuNzY1LDAuNDk5IEM3Ljk1OCwxLjUzLDcuOTYzLDIuODA2LDcuOTgsMi43MzdjMC4wNjQtMC4yNzEsMC4wNy0xLjIyOSwwLjI4My0xLjU4NEM4LjQwNCwwLjkxOCw4Ljc2LDAuNzA4LDguOTUxLDAuNjc1IGMwLjI5NC0wLjA1MywwLjY1NS0wLjA2OCwwLjk2NC0wLjAwOGMwLjI0OSwwLjA0OSwwLjU4NiwwLjM0NCwwLjY3NywwLjQ4NmMwLjIxOSwwLjM0NCwwLjM0MiwxLjMxNiwwLjM3OSwxLjY1OCBjMC4wMTYsMC4xNDEsMC4wNzQtMC4zOTQsMC4yOTMtMC43MzZjMC40MDYtMC42MzksMS44NDQtMC43NjQsMS44OTgsMC42MzljMC4wMjUsMC42NTQsMC4wMiwwLjYyNSwwLjAyLDEuMDY0IGMwLDAuNTE2LTAuMDEyLDAuODI4LTAuMDQsMS4yMDJjLTAuMDMsMC4zOTktMC4xMTYsMS4zMDQtMC4yNDEsMS43NDJjLTAuMDg2LDAuMzAxLTAuMzcxLDAuOTc4LTAuNjUyLDEuMzg0IGMwLDAtMS4wNzQsMS4yNS0xLjE5MSwxLjgxMmMtMC4xMTcsMC41NjMtMC4wNzgsMC41NjctMC4xMDIsMC45NjZzMC4xMjEsMC45MjMsMC4xMjEsMC45MjNzLTAuODAyLDAuMTA0LTEuMjM0LDAuMDM0IGMtMC4zOTEtMC4wNjItMC44NzUtMC44NDEtMS0xLjA3OGMtMC4xNzItMC4zMjgtMC41MzktMC4yNjYtMC42ODItMC4wMjNjLTAuMjI1LDAuMzgzLTAuNzA5LDEuMDctMS4wNTEsMS4xMTMgYy0wLjY2OSwwLjA4NC0yLjA1NSwwLjAzLTMuMTQsMC4wMmMwLDAsMC4xODUtMS4wMTEtMC4yMjctMS4zNTdjLTAuMzA1LTAuMjYtMC44My0wLjc4NC0xLjE0NC0xLjA2MUwxLjc2Niw4LjUzMyBDMS40ODMsOC4xNzQsMC43NjQsNy42MDQsMC41MjMsNi41NDlDMC4zMSw1LjYxMiwwLjMzMSw1LjE1MywwLjU2LDQuNzc4QzAuNzkyLDQuMzk3LDEuMjMsNC4xOSwxLjQxNCw0LjE1MyBjMC4yMDgtMC4wNDEsMC42OTItMC4wMzksMC44NzUsMC4wNjJjMC4yMjMsMC4xMjMsMC4zMTMsMC4xNTgsMC40ODgsMC4zOTFjMC4yMywwLjMwNywwLjMxMiwwLjQ1NiwwLjIxMywwLjEyMSBDMi45MTQsNC40NjYsMi42NjgsNC4xMzIsMi41NTYsMy43NTdjLTAuMTA5LTAuMzYxLTAuNDAxLTAuOTQxLTAuMzgtMS41MjVDMi4xODQsMi4wMTEsMi4yNzksMS40NiwzLjAwOCwxLjE4OXoiLz48bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiMwMTAxMDEiIHN0cm9rZS13aWR0aD0iMC43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiB4MT0iMTAuMDAxIiB5MT0iOC44ODgiIHgyPSIxMC4wMDEiIHkyPSI1LjQyOSIvPjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAxMDEwMSIgc3Ryb2tlLXdpZHRoPSIwLjc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHgxPSI3Ljk4NiIgeTE9IjguODk5IiB4Mj0iNy45NyIgeTI9IjUuNDI3Ii8+PGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDEwMTAxIiBzdHJva2Utd2lkdGg9IjAuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgeDE9IjUuOTkiIHkxPSI1LjQ1OCIgeDI9IjYuMDExIiB5Mj0iOC44ODQiLz48L3N2Zz4=), auto;

但是这个特定的版本，data:image/svg+xml，似乎不起作用。如果我将它用作背景，它确实可以，但我似乎无法让它为光标工作。

关于为什么这不起作用的任何想法或见解？

Answer 1

您使用的是哪种网络浏览器？您的代码在 Google Chrome 中运行良好。

根据 https://developer.mozilla.org/en-US/docs/Web/CSS/cursor/url 的规范它也应该在 Firefox 中工作。

我猜您使用的是 Internet Explorer？根据 http://msdn.microsoft.com/en-us/library/ie/aa358795(v=vs.85).aspx 处的 IE 文档, cursor: url(uri); 属性必须是 .cur 或 .ani 文件。看起来 IE 不支持 SVG 游标，除了通过 SVGCursorElement 在 SVG 文件中(详情请参阅 http://msdn.microsoft.com/en-us/library/ie/bg124137(v=vs.85).aspx)。