Question

谁能帮助我吗？我试图弄清楚如何为这个SVG路径获得漂亮，平滑的边缘（目前用Raphael绘制它）。这是问题的CodePen模型（您可能需要向下滚动才能看到窗口中的对角线 - 它与顶部有点偏移）。

<DOCTYPE html>
<body>
<div style="width:3484px; height:2000px;">
    <svg style="width:100%; height:100%;">
            <path fill="#fe0000" stroke="#fe0000" d="M606.182,649.872L739.73,670.2349999999999M743.215,670.366C742.902,669.307,741.7900000000001,668.702,740.73,669.015C739.6700000000001,669.33,739.066,670.442,739.38,671.501C739.694,672.5609999999999,740.806,673.165,741.865,672.851C742.925,672.538,743.53,671.425,743.215,670.366ZM594.333,649L463.09799999999996,628.047M459.614,627.881C459.917,628.943,461.02299999999997,629.559,462.085,629.256C463.14799999999997,628.953,463.763,627.845,463.46,626.784C463.156,625.721,462.04999999999995,625.106,460.988,625.409C459.927,625.713,459.311,626.819,459.614,627.881Z" style="transform: scale(.75); fill: red; stroke: red; stroke-width: 4px"></path>
        </svg>
    </div>
</body>
</html>

基本上问题是该线看起来非常锯齿状，没有平滑/抗锯齿，我需要能够将此SVG路径从100％缩放缩放到50％缩放以获得交互式地图。将其缩小使边缘看起来呈锯齿状，但我只是注意到对角线上的这个问题......

有人能帮我解决这个问题吗？

非常感谢！

Answer 1

平滑行。如果您使用屏幕放大镜或类似程序，您可以清楚地看到它。

它看起来有点锯齿状的事实只是线条颜色，背景对比度和线条角度的一个因素。

你不可能得到比这更好（或更好）的结果。

为了进行比较，下面是一个示例版本，显示了打开和关闭抗锯齿的区别。

<svg width="700px" height="700px">
  <path fill="#fe0000" stroke="#fe0000" d="M606.182,649.872L739.73,670.2349999999999M743.215,670.366C742.902,669.307,741.7900000000001,668.702,740.73,669.015C739.6700000000001,669.33,739.066,670.442,739.38,671.501C739.694,672.5609999999999,740.806,673.165,741.865,672.851C742.925,672.538,743.53,671.425,743.215,670.366ZM594.333,649L463.09799999999996,628.047M459.614,627.881C459.917,628.943,461.02299999999997,629.559,462.085,629.256C463.14799999999997,628.953,463.763,627.845,463.46,626.784C463.156,625.721,462.04999999999995,625.106,460.988,625.409C459.927,625.713,459.311,626.819,459.614,627.881Z" style="fill: red; stroke: red; stroke-width: 4px" transform="translate(0,-50) scale(.75)"></path>
  <path fill="#fe0000" stroke="#fe0000" shape-rendering="crispEdges" d="M606.182,649.872L739.73,670.2349999999999M743.215,670.366C742.902,669.307,741.7900000000001,668.702,740.73,669.015C739.6700000000001,669.33,739.066,670.442,739.38,671.501C739.694,672.5609999999999,740.806,673.165,741.865,672.851C742.925,672.538,743.53,671.425,743.215,670.366ZM594.333,649L463.09799999999996,628.047M459.614,627.881C459.917,628.943,461.02299999999997,629.559,462.085,629.256C463.14799999999997,628.953,463.763,627.845,463.46,626.784C463.156,625.721,462.04999999999995,625.106,460.988,625.409C459.927,625.713,459.311,626.819,459.614,627.881Z" style="transform: scale(.75); fill: red; stroke: red; stroke-width: 4px"></path>
</svg>

Answer 2

感谢您的回复。经过这么多时间，我发现这里真正需要的是＆＃34;外观＆＃34;更平滑或抗锯齿。我基本上能够在Raphael JS中模拟它（在画布上渲染线条），通过添加与线条相同颜色的轻微光晕，在相同的坐标处生成更多SVG元素，但是线条较粗在较低的不透明度下，基本上给了我正在寻找的抗锯齿（或者线条更平滑的外观）。

以下是来自Raphael的生成代码，它创建了一条深红色实线，然后是多个相同颜色的较粗行程的SVG元素，但较低的不透明度使其具有轻微的抗锯齿效果：

<path fill="none" stroke="#fe0000" d="M606.182,649.872C606.182,649.872,739.73,670.2349999999999,739.73,670.2349999999999M743.215,670.366C742.902,669.307,741.7900000000001,668.702,740.73,669.015C739.6700000000001,669.33,739.066,670.442,739.38,671.501C739.694,672.5609999999999,740.806,673.165,741.865,672.851C742.925,672.538,743.53,671.425,743.215,670.366C743.215,670.366,743.215,670.366,743.215,670.366M594.333,649C594.333,649,463.09799999999996,628.047,463.09799999999996,628.047M459.614,627.881C459.917,628.943,461.02299999999997,629.559,462.085,629.256C463.14799999999997,628.953,463.763,627.845,463.46,626.784C463.156,625.721,462.04999999999995,625.106,460.988,625.409C459.927,625.713,459.311,626.819,459.614,627.881C459.614,627.881,459.614,627.881,459.614,627.881" stroke-linejoin="round" stroke-linecap="round" stroke-width="2" opacity="0.3" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-linejoin: round; stroke-linecap: round; opacity: 0.3;"></path>
<path fill="none" stroke="#fe0000" d="M606.182,649.872C606.182,649.872,739.73,670.2349999999999,739.73,670.2349999999999M743.215,670.366C742.902,669.307,741.7900000000001,668.702,740.73,669.015C739.6700000000001,669.33,739.066,670.442,739.38,671.501C739.694,672.5609999999999,740.806,673.165,741.865,672.851C742.925,672.538,743.53,671.425,743.215,670.366C743.215,670.366,743.215,670.366,743.215,670.366M594.333,649C594.333,649,463.09799999999996,628.047,463.09799999999996,628.047M459.614,627.881C459.917,628.943,461.02299999999997,629.559,462.085,629.256C463.14799999999997,628.953,463.763,627.845,463.46,626.784C463.156,625.721,462.04999999999995,625.106,460.988,625.409C459.927,625.713,459.311,626.819,459.614,627.881C459.614,627.881,459.614,627.881,459.614,627.881" stroke-linejoin="round" stroke-linecap="round" stroke-width="4" opacity="0.3" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-linejoin: round; stroke-linecap: round; opacity: 0.3;"></path>
<path fill="none" stroke="#fe0000" d="M606.182,649.872C606.182,649.872,739.73,670.2349999999999,739.73,670.2349999999999M743.215,670.366C742.902,669.307,741.7900000000001,668.702,740.73,669.015C739.6700000000001,669.33,739.066,670.442,739.38,671.501C739.694,672.5609999999999,740.806,673.165,741.865,672.851C742.925,672.538,743.53,671.425,743.215,670.366C743.215,670.366,743.215,670.366,743.215,670.366M594.333,649C594.333,649,463.09799999999996,628.047,463.09799999999996,628.047M459.614,627.881C459.917,628.943,461.02299999999997,629.559,462.085,629.256C463.14799999999997,628.953,463.763,627.845,463.46,626.784C463.156,625.721,462.04999999999995,625.106,460.988,625.409C459.927,625.713,459.311,626.819,459.614,627.881C459.614,627.881,459.614,627.881,459.614,627.881" stroke-linejoin="round" stroke-linecap="round" stroke-width="6" opacity="0.3" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-linejoin: round; stroke-linecap: round; opacity: 0.3;"></path>
<path fill="#fe0000" stroke="#fe0000" d="M606.182,649.872L739.73,670.2349999999999M743.215,670.366C742.902,669.307,741.7900000000001,668.702,740.73,669.015C739.6700000000001,669.33,739.066,670.442,739.38,671.501C739.694,672.5609999999999,740.806,673.165,741.865,672.851C742.925,672.538,743.53,671.425,743.215,670.366ZM594.333,649L463.09799999999996,628.047M459.614,627.881C459.917,628.943,461.02299999999997,629.559,462.085,629.256C463.14799999999997,628.953,463.763,627.845,463.46,626.784C463.156,625.721,462.04999999999995,625.106,460.988,625.409C459.927,625.713,459.311,626.819,459.614,627.881Z" fill-opacity="1" stroke-width="3" opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); fill-opacity: 1; opacity: 1;"></path>

请注意每个的笔触宽度和不透明度设置以及坐标都相同。

我希望这个讨论可以帮助将来的某个人！谢谢！

如何平滑SVG路径的边缘

2 个答案: