使用SVG Base64 URI的CSS光标图像

时间:2014-09-21 08:09:46

标签: css svg

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

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

但是这个特殊版本的数据:image / svg + xml似乎不起作用。如果我将它作为背景使用它,但我似乎无法让它为光标工作。

任何想法或洞察为什么这不起作用?

1 个答案:

答案 0 :(得分:2)

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

根据https://developer.mozilla.org/en-US/docs/Web/CSS/cursor/url的规范,它也适用于Firefox。

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