SVG笔触和填充之间的空间

问题描述

用相同的颜色填充和描边一个超过一定大小的stroke-width，会在两个绘制区域之间"产生一个奇怪的透明区域.这是怎么回事?

这在 Chrome 和 Firefox 中都会发生，所以它可能符合规范，但我在规范中找不到关于此行为的任何语言.

解决方案

我发现添加 stroke-linecap="round"style="stroke-dasharray: 1000, 1000;" 通过引入虚拟破折号来解决问题

<circle cx="100" cy="100" r="8"笔画=#000"笔画宽度=40"fill="#0F0" stroke-linecap="round" style="stroke-dasharray: 1000, 1000;"/></svg>

Filling and stroking a circle with the same color and a stroke-width exceeding a certain size, produces a strange transparent region "between" the two paint regions. What is going on?

This is happening in both Chrome and Firefox, so it may be to spec, but I couldn’t find any language in the spec about this behavior.

Fiddle

<svg viewBox="0 0 300 300">
  <circle cx="100" cy="100" r="8" 
    stroke="#000" stroke-width="40" 
    fill="#000"/>
</svg>

Produces this rendering:

解决方案

I found that adding stroke-linecap="round" style="stroke-dasharray: 1000, 1000;" fixes the issue by introducing virtual dashes

<svg viewBox="0 0 300 300">
  <circle cx="100" cy="100" r="8" 
    stroke="#000" stroke-width="40" 
    fill="#0F0" stroke-linecap="round" style="stroke-dasharray: 1000, 1000;" />
</svg>

这篇关于SVG笔触和填充之间的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！