如何平滑SVG路径的边缘
Jen*_*enn 5 html svg antialiasing
谁能帮我？我想弄清楚如何为这个 SVG 路径（目前用 Raphael 绘制它）获得漂亮、平滑的边缘。这是问题的 CodePen 模型（您可能需要向下滚动才能看到窗口中的对角线 - 它与顶部有点偏移）。
http://codepen.io/anon/pen/qbxYOg
<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% 缩放比例以用于交互式地图。缩小它会使边缘看起来锯齿状，但我只注意到对角线上的线条有这个问题......
有人能帮我解决这个问题吗？
谢谢一堆！
线条正在被平滑。如果您使用屏幕放大镜或类似程序，您可以清楚地看到它。
事实上，它看起来有点锯齿只是线条颜色、与背景的对比度以及线条角度的一个因素。
您不太可能得到比这更好（或任何）的结果。
为了进行比较，这里是示例的一个版本，显示了抗锯齿打开和关闭之间的差异。
<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>