时间戳

首页 > 解决方案 > SVG 光标有不需要的灰色边缘

html - SVG 光标有不需要的灰色边缘

问题描述

我正在尝试将 svg 用作光标并获得蹩脚的灰色边缘。仅在某些颜色背景上发生非垂直或水平边缘（它发生在对角线和这个圆圈上）。

尝试弄乱形状渲染和边框，但这似乎没有帮助。

似乎可能有一个阴影被自动渲染或什么？我对 svg 了解不多，所以也许这是显而易见的事情，或者只是世界的方式。

编辑：在 chrome & safari 中看到这个

光标CSS：

cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"><circle cx="50" cy="50" r="50" style="fill:#EAFB4C;"/></svg>'), pointer;


body {
background:rgb(215, 248, 3);
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"><circle cx="50" cy="50" r="50" style="fill:#EAFB4C;"/></svg>'), pointer;
}
square-cursor {
display:block;
width:300px;
height:300px;
border:1px solid blue;
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100" ><polygon points="0,0 100,0 100,100 0,100" style="fill:#EAFB4C;"/></svg>'), pointer;
}
dark-background {
display:block;
width:300px;
height:300px;
background:blue;
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"><circle cx="50" cy="50" r="50" style="fill:#EAFB4C;"/></svg>'), pointer;
}
<body>
<square-cursor></square-cursor>
<dark-background></dark-background>
same svg dot not as cursor below:<br><svg width="100" height="100"><circle cx="50" cy="50" r="50" style="fill:#EAFB4C;"/></svg>
</body>

标签： htmlcsssvg

解决方案

推荐阅读