如何在d3和SVG中創建陰影路徑？

Question

我創建具有陰影效果的圖表，並希望有類似效果的線圖這一個蘋果的健康套件，除了沒有最后一個數據點后急劇垂直線。 本質上，我希望在線條形狀下方的陰影下着色，而不是像非常模糊的陰影一樣。 如何在d3中實現？

Answer 1

除了圖形線，您還需要創建一個放置在該線后面的多邊形。 給該多邊形一個線性漸變。 漸變顏色為白色，從頂部的半透明到底部的全透明不等。

下面的演示。 我將離開您將其轉換為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> 

更新資料

抱歉，我想念您關於模糊線下漸變的觀點。 我在示例中添加了一些模糊，以向您展示模糊濾鏡可以做什么。 這只是一個快速的技巧，您可以看到它如何流血。 要解決此問題，您需要制作一個遮罩或剪切路徑以遮罩線條上方的區域，以使出血不可見。