Я пытаюсь использовать svg для курсора и получаю дрянные серые края. происходит только с не вертикальными или горизонтальными краями (это происходило как с диагоналями, так и с этим кругом) на определенных цветных фонах.
попытался возиться с рендерингом фигур и границ, но это не помогло.
Похоже, может быть, автоматически создается тень или что-то в этом роде? я не знаю много о svg, так что, может быть, это что-то очевидное или просто путь мира.
edit: просмотр этого в 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>