防止svg边框渐变颜色

【问题标题】：Prevent svg border gradient color防止svg边框渐变颜色
【发布时间】：2013-10-22 20:01:03
【问题描述】：

我注意到 svg 在元素周围的非常小的像素中添加了一些渐变边框。这是它的jsfiddle：

<rect x="1" y="1" width="1198" height="398"
      fill="none" stroke="blue" stroke-width="10" />

<g stroke="green" >
  <line x1="100" y1="300" x2="300" y2="300"
          stroke-width="20" fill="none" />
</g>

如何绘制纯色线和矩形。普通变焦很难看清。我截图并在 pixlr.com 中放大。这是图片：

【问题讨论】：

标签： javascript css svg

【解决方案1】：

那是抗锯齿。您可以使用 shape-rendering="crispEdges" 将其关闭，但请注意，任何对角线都会看起来更粗糙。

【讨论】：

为什么不包括它的实际内容？ :) “表示用户代理应尝试强调艺术品干净边缘之间的对比，而不是渲染速度和几何精度。为了获得清晰的边缘，用户代理可能会关闭所有直线和曲线的抗锯齿，或者可能只关闭直线接近垂直或水平的线条。此外，用户代理可能会调整线条位置和线条宽度以使边缘与设备像素对齐。”
非常感谢您的回答！