我正在尝试将svg用于光标,并获得cr脚的灰色边缘。仅在某些彩色背景上发生了没有垂直或水平边缘的情况(发生在对角线以及这个圆上)。
试图弄乱形状渲染和边框,但这似乎无济于事。
似乎有一个阴影正在自动渲染或什么?我对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>