Html 如何平滑SVG路径的边

有人能帮我吗？我试图找出如何为这个SVG路径（目前使用Raphael绘制）获得漂亮、平滑的边缘。这是一个代码笔的问题模型（你可能需要向下滚动才能看到窗口中的对角线——它有点偏离顶部）

基本上，问题是线条看起来非常参差不齐，没有平滑/抗锯齿，我需要能够将此SVG路径从100%缩放到50%缩放，以实现交互式地图。缩小它会使边缘看起来参差不齐，但我只注意到对角线上的线有这个问题

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

---

非常感谢

直线正在平滑。如果你使用屏幕放大镜，或类似的程序，你可以清楚地看到它是

它看起来有点参差不齐，这只是线条颜色、与背景的对比度以及线条角度的一个因素

你不可能得到比这更好的结果

为了进行比较，下面是示例的一个版本，显示了启用和禁用抗锯齿之间的差异

谢谢您的回复。在昨天花了很多时间研究这个问题之后，我发现这里真正需要的是更平滑或抗锯齿的“外观”。我基本上能够模拟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>



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

我希望这次讨论对将来的人有所帮助！
谢谢

<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>