- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在绘制一些具有相同笔划的路径,但有一些明显的重叠(动态创建和更新树)。在重叠区域,笔划看起来与非重叠区域(- 参见 b)不同(更暗和更粗 - 参见 a)。同样的效果对于不同的笔触颜色也很明显。
代码如下:
path.p2 {
fill: none;
stroke: black;
stroke-width: 1px;
}
<svg height="500" width="400">
<path class="p2" d="M210 10 V 100 H 300 "/>
<path class="p2" d="M210 10 V 120 H 300 "/>
<path class="p2" d="M210 10 V 140 H 300 "/>
<path class="p2" d="M210 10 V 160 H 300 "/>
</svg>
是否有简单的 CSS、SVG 或 javascript 修复如何绘制这些路径(无需重新计算重叠区域和创建新路径)?
最佳答案
正如我评论过的,您可以将 shape-rendering: crispEdges
添加到 path.p2
MDN 引用:
crispEdges Indicates that the user agent shall attempt to emphasize the contrast between clean edges of artwork over rendering speed and geometric precision. To achieve crisp edges, the user agent might turn off anti-aliasing for all lines and curves or possibly just for straight lines which are close to vertical or horizontal. Also, the user agent might adjust line positions and line widths to align edges with device pixels.
svg {
outline:1px solid;
}
path.p2 {
fill: none;
stroke: black;
stroke-width: 1px;
shape-rendering: crispEdges;
}
<svg height="500" width="400">
<path class="p2" d="M210 10 V 100 H 300 "/>
<path class="p2" d="M210 10 V 120 H 300 "/>
<path class="p2" d="M210 10 V 140 H 300 "/>
<path class="p2" d="M210 10 V 160 H 300 "/>
</svg>
关于javascript - 为什么 SVG 线条/路径在彼此之上会产生不同的笔划?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55110846/
所以我试图通过使用套接字创建一个类似同步绘画程序的东西。我有一个服务器端..和一个客户端,我试图将inkCollection从服务器发送到客户端。这适用于简单的文本,但我似乎无法发送inkCollec
我正在胡思乱想,无法控制路径宽度。 看到倒数第二行,真是莫名其妙: var paper = Raphael(20, 20, 320, 320); function arc(center, radi
我想提一下,这篇文章类似于 Continuous drawing in CGContext with drawRect但它没有任何代码片段解决方案,所以再次询问。 我正在学习 iOS 开发应用程序。我
我正在创建很多元素,这些元素基本上基于模板,但具有不同的大小和颜色 - 圆圈、方框、星号、菱形、图表中经常使用的元素。我发现我可以使用 SVG Symbol 来定义我的模板,如下例所示: http:/
我正在使用 Chart.js 创建圆环图,但遇到了圆环上的笔划被 Canvas 对象 chop 的问题。 Canvas 上的填充/边距并没有为我解决问题。知道发生了什么事吗? JSFiddle her
我试过设置描边颜色。它可以使用 linearGradient 但不能使用 solidColor :
我目前正在调整文件输入以使用预览显示其内容 标签。 ..... 使用一些 CSS,它在 Chrome 上正确呈现,但我在 Firefox 上(并且仅在 Firefox 上)在正
我有一组三 Angular 坐标。每三个点一个 vector 。在下图中,这个三 Angular 形是 thin yellow 三 Angular 形。我需要向这个向内和向外突出的三 Angular
我是一名优秀的程序员,十分优秀!