为什么我的 svg 在导入时很脆，但作为光标模糊?

Question

我试图使用以下 svg 图像作为我的文档的光标：

<svg height="128" width="128" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 135.92"><defs><style>.cls-1{fill:#ef0000;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M72,135.92,52.25,103c-.54-.91-.59-7.11.32-8.23l1-1.16,8.06,1.18V78.2H42.18l1.17,7.53-.81.93c-1.47,1.69-7.86.93-8.27.75L0,68,34,48.6c.6-.29,6.9-.9,8.34.48l1,1-1.18,7.61H61.63V41.1l-8.1,1.21-1-1.17c-.91-1.11-.86-7.32-.33-8.21L72,0,91.75,32.91c.5.85.68,7-.3,8.23l-1,1.17-8-1.19V57.7h19.36L100.61,50l1.08-1c1.41-1.27,7.62-.73,8-.54L144,68,110,87.3c-.65.3-6.95,1-8.42-.54l-.91-1,1.17-7.55H82.37V94.8l8.12-1.19,1,1.16c1,1.22.8,7.38.31,8.21Zm-14.82-35L72,125.58l14.82-24.7c0-.36,0-.85,0-1.35L77.05,101V73h31l-1.45,9.37H108L133.24,68l-25.3-14.4h-1.38L108,63H77.14V35l9.67,1.44c0-.51,0-1,0-1.36L72,10.34,57.18,35c0,.36,0,.85,0,1.36L67,34.92V63H36l1.45-9.4H36L10.76,68l25.3,14.37h1.38L36,72.88H66.91v28.06L57.2,99.52C57.19,100,57.18,100.52,57.18,100.89Z"/></g></g></svg>
<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 135.92"><defs><style>.cls-1{fill:#ef0000;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M72,135.92,52.25,103c-.54-.91-.59-7.11.32-8.23l1-1.16,8.06,1.18V78.2H42.18l1.17,7.53-.81.93c-1.47,1.69-7.86.93-8.27.75L0,68,34,48.6c.6-.29,6.9-.9,8.34.48l1,1-1.18,7.61H61.63V41.1l-8.1,1.21-1-1.17c-.91-1.11-.86-7.32-.33-8.21L72,0,91.75,32.91c.5.85.68,7-.3,8.23l-1,1.17-8-1.19V57.7h19.36L100.61,50l1.08-1c1.41-1.27,7.62-.73,8-.54L144,68,110,87.3c-.65.3-6.95,1-8.42-.54l-.91-1,1.17-7.55H82.37V94.8l8.12-1.19,1,1.16c1,1.22.8,7.38.31,8.21Zm-14.82-35L72,125.58l14.82-24.7c0-.36,0-.85,0-1.35L77.05,101V73h31l-1.45,9.37H108L133.24,68l-25.3-14.4h-1.38L108,63H77.14V35l9.67,1.44c0-.51,0-1,0-1.36L72,10.34,57.18,35c0,.36,0,.85,0,1.36L67,34.92V63H36l1.45-9.4H36L10.76,68l25.3,14.37h1.38L36,72.88H66.91v28.06L57.2,99.52C57.19,100,57.18,100.52,57.18,100.89Z"/></g></g></svg>

html {
cursor: url(cursor/move.svg), auto;
}

但是，无论我将其大小更改为大(128px(还是小，也没关系，无论我使用的是Chrome，Firefox还是Safari，它仍然有些像素化。当我将其导入HTML文档时，它清晰干净，但将其用作光标时却模糊和像素化。我做错了什么？

Answer 1

我刚刚将光标更新为如下所示，我不知道这是否有帮助：

html {
width: 50vw;
height: 50vh;
background: gold;

cursor: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='128px' height='128px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E %3Cpath d='M72,135.92,52.25,103c-.54-.91-.59-7.11.32-8.23l1-1.16,8.06,1.18V78.2H42.18l1.17,7.53-.81.93c-1.47,1.69-7.86.93-8.27.75L0,68,34,48.6c.6-.29,6.9-.9,8.34.48l1,1-1.18,7.61H61.63V41.1l-8.1,1.21-1-1.17c-.91-1.11-.86-7.32-.33-8.21L72,0,91.75,32.91c.5.85.68,7-.3,8.23l-1,1.17-8-1.19V57.7h19.36L100.61,50l1.08-1c1.41-1.27,7.62-.73,8-.54L144,68,110,87.3c-.65.3-6.95,1-8.42-.54l-.91-1,1.17-7.55H82.37V94.8l8.12-1.19,1,1.16c1,1.22.8,7.38.31,8.21Zm-14.82-35L72,125.58l14.82-24.7c0-.36,0-.85,0-1.35L77.05,101V73h31l-1.45,9.37H108L133.24,68l-25.3-14.4h-1.38L108,63H77.14V35l9.67,1.44c0-.51,0-1,0-1.36L72,10.34,57.18,35c0,.36,0,.85,0,1.36L67,34.92V63H36l1.45-9.4H36L10.76,68l25.3,14.37h1.38L36,72.88H66.91v28.06L57.2,99.52C57.19,100,57.18,100.52,57.18,100.89Z'/%3E %3C/svg%3E"), pointer;
}

Answer 2

渲染SVG 图像时，遵循整数坐标的水平线和垂直线将分布在两侧的两个像素上(水平线上方/下方，以及垂直线的左侧/右侧(。这使它们看起来模糊不清。

为避免这种情况，请使用整数坐标创建设计，然后在 X 和 Y 方向上将结果偏移半个像素。结果会更加清晰。

此外，将光标绘制在所需的尺寸上比在必须缩小的更大尺寸上更有意义。

下面是使用和不使用半像素偏移绘制的简单光标。通过添加的偏移量，您应该能够更清楚地看到它。

<!-- Lines following integer coordinates -->
<svg height="16" width="16" viewBox="0 0 16 16">
<path d="M8,1L10.5,4L9,4L9,7L12,7L12,5.5L15,8
L12,10.5L12,9L9,9L9,12L10.5,12L8,15
L5.5,12L7,12L7,9L4,9L4,10.5L1,8L4,5.5
L4,7L7,7L7,4L5.5,4L8,1Z" fill="none"
stroke="#e00" stroke-width="0.8"
stroke-miterlimit="2"/>
</svg>
<!-- Lines offset by half a pixel -->
<svg height="16" width="16" viewBox="0 0 16 16">
<path d="M8.5,1.5L11,4.5L9.5,4.5L9.5,7.5
L12.5,7.5L12.5,6L15.5,8.5L12.5,11
L12.5,9.5L9.5,9.5L9.5,12.5L11,12.5
L8.434,15.5L6,12.5L7.5,12.5L7.5,9.5
L4.5,9.5L4.5,11L1.5,8.5L4.5,6L4.5,7.5
L7.5,7.5L7.5,4.5L6,4.5L8.5,1.5Z"
fill="none" stroke="#e00"
stroke-width="0.8" stroke-miterlimit="2"/>
</svg>

例：

这是这些图像中的第二个用作光标时的样子(即偏移 1/2 像素的图像(：

* {
cursor: url("data:image/svg+xml,%3Csvg  xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 16 16'%3E%3Cpath d='M8.5,1.5L11,4.5L9.5,4.5L9.5,7.5L12.5,7.5L12.5,6L15.5,8.5L12.5,11L12.5,9.5L9.5,9.5L9.5,12.5L11,12.5L8.434,15.5L6,12.5L7.5,12.5L7.5,9.5L4.5,9.5L4.5,11L1.5,8.5L4.5,6L4.5,7.5L7.5,7.5L7.5,4.5L6,4.5L8.5,1.5Z' fill='none' stroke='#e00' stroke-width='0.8' stroke-miterlimit='2'/%3E%3C/svg%3E") 8 8, move;
}