我创建具有阴影效果的图表,并希望有类似效果的线图这一个苹果的健康套件,除了没有最后一个数据点后急剧垂直线。从本质上讲,我希望在线条形状下方的阴影下着色,而不是像非常模糊的阴影一样。如何在d3中实现?
除了图线之外,您还需要创建一个放置在该线后面的多边形。给该多边形一个线性渐变。渐变颜色是白色,从顶部的半透明到底部的全透明不等。
下面的演示。我将离开您将其转换为d3。
<svg width="750" height="384">
<defs>
<!-- The below-the-graph gradient fill -->
<linearGradient id="grad" x2="0" y2="1">
<stop offset="0%" stop-color="white" stop-opacity="0.5"/>
<stop offset="100%" stop-color="white" stop-opacity="0"/>
</linearGradient>
<filter id="blur">
<feGaussianBlur stdDeviation="10" />
</filter>
</defs>
<!-- The orange background -->
<rect x="10" y="10" width="734" height="368" rx="14" fill="#ff7744"/>
<!-- This transform just moves the graph from the origin (top left) onto the orange background -->
<g transform="translate(80,134)">
<!-- Same shape as the graph but adds points at bottom right and bottom left to complete the polygon -->
<polygon fill="url(#grad)" filter="url(#blur)"
points="0,127, 90,85, 180,115, 270,47, 360,143, 450,0
450,177, 0,177"/>
<!-- The white graph line goes last (on top) -->
<polyline fill="none" stroke="white" stroke-width="3"
points="0,127, 90,85, 180,115, 270,47, 360,143, 450,0"/>
</g>
</svg>
更新
抱歉,我想念您关于模糊线下渐变的观点。我在示例中添加了一些模糊,以向您展示模糊滤镜可以做什么。这只是一个快速的技巧,您可以看到它是如何流血的。要解决此问题,您需要制作一个遮罩或剪切路径以遮罩线条上方的区域,以使出血不可见。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句