时间戳

首页 > 解决方案 > 为什么 SVG 笔画是半透明的

svg - 为什么 SVG 笔画是半透明的

问题描述

我有一个 SVG 图，它由许多<path>元素组成，其中一些元素重叠。我遇到的问题是路径重叠的地方，第一个元素的颜色在第二个元素改变颜色时显示出来。我尝试使用该stroke-opacity属性，但这并不能解决问题。然后我注意到，当笔画大于 1px 时，顶部颜色按预期显示，但边缘后面有颜色的条纹。有没有办法阻止这种情况？提前致谢。

<!DOCTYPE html>
<html>
<body>

<svg height="80" width="300">
  <g fill="none" stroke-width="1">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="black" d="M5 20 l215 0" />
  </g>
     <text x="0" y="12">1px stroke shows as brown rather than black</text>
      <g fill="none" stroke-width="4">
    <path stroke="red" d="M5 50 l215 0" />
    <path stroke="black" d="M5 50 l215 0" />
  </g>
  <text x="0" y="40">Larger than 1px has overfringing</text>
</svg>

</body>
</html>

在此处输入图像描述

标签： svggraphics

解决方案

您可以尝试向 SVG 元素添加形状渲染：

shape-rendering: auto | optimizeSpeed | crispEdges | geometricPrecision | initial | inherit

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering

推荐阅读