时间戳

首页 > 解决方案 > 尽管进行了形状渲染，但 SVG 线条不一致

html - 尽管进行了形状渲染，但 SVG 线条不一致

问题描述

为什么我在 svg 中的某些线条比其他线条粗？ 在此处输入图像描述 它们都在整数坐标上。“stroke-width: 0.5”是我最后一次尝试创建 1px 线。我也尝试过其他地方提到的形状渲染：笔画为 1 像素但设置相同的脆边，在图像上看起来更粗的线条是直线 2 像素而不是 1 像素。我很想以某种方式解决这个问题，但甚至知道它是如何确定哪些线条的按什么规则变厚会很感激。我不明白为什么使用 svg 制作一致的 1px 粗线如此困难。

我的代码：

#my-svg {
   width : 500px;
   height: 500px;
   margin: .5em;
}
#my-svg line {
  stroke:black;
  stroke-width:0.5;
}
<svg id="my-svg" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 500">
  <line x1="0"  y1="26"   x2="380" y2="26" ></line>
  <line x1="0"   y1="52"  x2="380" y2="52" ></line>
  <line x1="0"   y1="78"  x2="380" y2="78" ></line>
  <line x1="0"   y1="104" x2="380" y2="104"></line>
  <line x1="0"   y1="130" x2="380" y2="130"></line>
  <line x1="0"   y1="156" x2="380" y2="156"></line>
  <line x1="0"   y1="182" x2="380" y2="182"></line>
  <line x1="40"  y1="0"   x2="40"  y2="182"></line>
  <line x1="240" y1="0"   x2="240" y2="182"></line>
  <line x1="300" y1="0"   x2="300" y2="182"></line>
  <line x1="380" y1="0"   x2="380" y2="182"></line>
</svg>

使用 stroke-width: 1 和 shape-rendering: crispedges 时的示例： 在此处输入图像描述

标签： htmlcsssvg

解决方案

我使用了一个 html 文档和一个单独的在线编辑器来检查你的代码两次。你的代码是正确的！这似乎是浏览器可视化错误...

快速提示：您的代码行也可以这样结束：stroke:black; 笔画宽度：0.5" />

如果错误仍然存​​在，请向我们提供其他信息，例如浏览器、版本、完整代码审查等。

它为我工作的方式：

<!DOCTYPE html>
<html>
<body>

<svg height="500" width="500" viewbox="0 0 500 500">
  <line x1="0" y1="26" x2="380" y2="26" style="stroke:black; stroke-width:0.5" />
  <line x1="0" y1="52" x2="380" y2="52" style="stroke:black; stroke-width:0.5" />
  <line x1="0" y1="78" x2="380" y2="78" style="stroke:black; stroke-width:0.5" />
  <line x1="0" y1="104" x2="380" y2="104" style="stroke:black; stroke-width:0.5" />
  <line x1="0" y1="130" x2="380" y2="130" style="stroke:black; stroke-width:0.5" />
  <line x1="0" y1="156" x2="380" y2="156" style="stroke:black; stroke-width:0.5" />
  <line x1="0" y1="182" x2="380" y2="182" style="stroke:black; stroke-width:0.5" />
  <line x1="40" y1="0" x2="40" y2="182" style="stroke:black; stroke-width:0.5" />
  <line x1="240" y1="0" x2="240" y2="182" style="stroke:black; stroke-width:0.5" />
  <line x1="300" y1="0" x2="300" y2="182" style="stroke:black; stroke-width:0.5" />
  <line x1="380" y1="0" x2="380" y2="182" style="stroke:black; stroke-width:0.5" />
  
  
</svg>

</body>
</html>

推荐阅读