SVG 图像作为光标像素化答案

【问题标题】：SVG image as a cursor pixcelatedSVG 图像作为光标像素化
【发布时间】：2020-01-26 13:14:38
【问题描述】：

我在我的网站中使用这个自定义大小 64*64 加上图标 svg 作为缩放图标作为光标。如您所见，它是像素化的。特别是白色边框。不知道为什么。因为它是 svg，所以它看起来很清晰对吧？

我什么都试过了。

增加边框宽度。增加规模。设置 shape-rendering="auto"

以上都不起作用。

这是我的 svg 代码

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg width="64px" height="64px" 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"
     viewBox="-285 377 40 40" style="enable-background:new -285 377 40 40;" xml:space="preserve" shape-rendering="auto">
<style type="text/css">
    .st0{fill:none;}
    .st1{opacity:0.8;fill:none;stroke:#FFFFFF;stroke-width:3;stroke-miterlimit:10;enable-background:new    ;}
</style>
<title>zoom_icon</title>
<g>
    <title>background</title>
    <rect id="canvas_background" x="-286" y="376" class="st0" width="12.6" height="12.6"/>
</g>
<g>
    <title>Layer 1</title>
    <g id="Layer_2_1_">
        <g id="Layer_1-2">
            <circle id="svg_1" shape-rendering="geometricPrecision" class="st1" cx="-264.8" cy="397.2" r="18"/>
            <line id="svg_2" class="st1" x1="-264.8" y1="386.7" x2="-264.8" y2="407.7"/>
            <line id="svg_3" class="st1" x1="-254.3" y1="397.2" x2="-275.3" y2="397.2"/>
        </g>
    </g>
</g>
</svg>

这是我的 svg 文件：https://svgshare.com/i/H_C.svg

这是真实世界的例子。 Jsfiddle

用什么方法对这张图片进行像素化？

【问题讨论】：

标签： html css svg

【解决方案1】：

您可以尝试删除 circle 并使用边框：

.plus {
    border: solid white 1px;
    border-radius: 50%;
}

【讨论】：