问题

我有一个趋势图，看起来像这样：

&lt;svg width=&quot;175&quot; height=&quot;50&quot; viewBox=&quot;0 0 175 50&quot; fill=&quot;true&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke=&quot;black&quot;&gt;&lt;defs&gt;&lt;linearGradient id=&quot;react-trend-vertical-gradient-9449655103672434&quot; x1=&quot;0%&quot; y1=&quot;0%&quot; x2=&quot;0%&quot; y2=&quot;100%&quot;&gt;&lt;stop offset=&quot;0&quot; stop-color=&quot;#316BBE&quot;&gt;&lt;/stop&gt;&lt;stop offset=&quot;1&quot; stop-color=&quot;#316BBE&quot;&gt;&lt;/stop&gt;&lt;/linearGradient&gt;&lt;/defs&gt;&lt;clipPath id=&quot;cut-off-bottom&quot;&gt;&lt;rect x=&quot;0&quot; y=&quot;-8&quot; width=&quot;175&quot; height=&quot;50&quot;&gt;&lt;/rect&gt;&lt;/clipPath&gt;&lt;path id=&quot;react-trend-9449655103672434&quot; d=&quot;M 8,42
L 16.47383891803467,26.77906669817169
S 19.357142857142858,21.6 25.035714285714285,23.3
L 25.035714285714285,23.3
S 30.714285714285715,25 34.51372707642143,20.450228708486538
L 36.39285714285714,18.2
S 42.07142857142857,11.399999999999999 47.75,18.199999999999996
L 47.75,18.2
S 53.42857142857143,25 58.349935306257734,17.63343017050729
L 59.23065242856076,16.31512403775182
S 64.78571428571428,8 69.09240847758271,17.025097514028683
L 73.2924185202937,25.826627993470822
S 76.14285714285714,31.8 81.82142857142857,28.4
L 81.82142857142857,28.4
S 87.5,25 92.42420103267804,20.577510015934436
L 93.17857142857143,19.9
S 98.85714285714286,14.8 103.0970844759733,21.146579278500923
L 106.53759956873661,26.296532687794436
S 110.21428571428571,31.8 115.89285714285714,35.2
L 115.89285714285714,35.2
S 121.57142857142857,38.6 124.42186719399201,32.62662799347083
L 128.621877236703,23.82509751402868
S 132.92857142857144,14.8 137.792791259808,23.537240149692863
L 139.4214944544777,26.46275985030714
S 144.28571428571428,35.2 148.5924084775827,26.174902485971316
L 151.3361629509887,20.425097514028685
S 155.64285714285714,11.399999999999999 159.1224146222211,20.775109585908968
L 167,42&quot; fill=&quot;#316BBE&quot; fill-opacity=&quot;0.1&quot; clip-path=&quot;url(#cut-off-bottom)&quot; stroke=&quot;url(#react-trend-vertical-gradient-9449655103672434)&quot;&gt;&lt;/path&gt;&lt;/svg&gt;

当第一个和最后一个值都是'0'时，它渲染得很好，但是如果我将'11'作为最后一个值，它会渲染成这样：

&lt;svg width=&quot;175&quot; height=&quot;50&quot; viewBox=&quot;0 0 175 50&quot; fill=&quot;true&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke=&quot;black&quot;&gt;&lt;defs&gt;&lt;linearGradient id=&quot;react-trend-vertical-gradient-214921560992256&quot; x1=&quot;0%&quot; y1=&quot;0%&quot; x2=&quot;0%&quot; y2=&quot;100%&quot;&gt;&lt;stop offset=&quot;0&quot; stop-color=&quot;#316BBE&quot;&gt;&lt;/stop&gt;&lt;stop offset=&quot;1&quot; stop-color=&quot;#316BBE&quot;&gt;&lt;/stop&gt;&lt;/linearGradient&gt;&lt;/defs&gt;&lt;clipPath id=&quot;cut-off-bottom&quot;&gt;&lt;rect x=&quot;0&quot; y=&quot;-8&quot; width=&quot;175&quot; height=&quot;50&quot;&gt;&lt;/rect&gt;&lt;/clipPath&gt;&lt;path id=&quot;react-trend-214921560992256&quot; d=&quot;M 8,42
L 16.28365848373006,28.473339834457946
S 19.357142857142858,23.454545454545453 25.035714285714285,25
L 25.035714285714285,25
S 30.714285714285715,26.545454545454547 34.69553752776538,22.211375956051867
L 36.39285714285714,20.363636363636367
S 42.07142857142857,14.181818181818183 47.75,20.363636363636363
L 47.75,20.363636363636367
S 53.42857142857143,26.545454545454547 58.399315977540795,19.781376771556

英文:

I have a trend graph which looks like this:

&lt;svg width=&quot;175&quot; height=&quot;50&quot; viewBox=&quot;0 0 175 50&quot; fill=&quot;true&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke=&quot;black&quot;&gt;&lt;defs&gt;&lt;linearGradient id=&quot;react-trend-vertical-gradient-9449655103672434&quot; x1=&quot;0%&quot; y1=&quot;0%&quot; x2=&quot;0%&quot; y2=&quot;100%&quot;&gt;&lt;stop offset=&quot;0&quot; stop-color=&quot;#316BBE&quot;&gt;&lt;/stop&gt;&lt;stop offset=&quot;1&quot; stop-color=&quot;#316BBE&quot;&gt;&lt;/stop&gt;&lt;/linearGradient&gt;&lt;/defs&gt;&lt;clipPath id=&quot;cut-off-bottom&quot;&gt;&lt;rect x=&quot;0&quot; y=&quot;-8&quot; width=&quot;175&quot; height=&quot;50&quot;&gt;&lt;/rect&gt;&lt;/clipPath&gt;&lt;path id=&quot;react-trend-9449655103672434&quot; d=&quot;M 8,42
L 16.47383891803467,26.77906669817169
S 19.357142857142858,21.6 25.035714285714285,23.3
L 25.035714285714285,23.3
S 30.714285714285715,25 34.51372707642143,20.450228708486538
L 36.39285714285714,18.2
S 42.07142857142857,11.399999999999999 47.75,18.199999999999996
L 47.75,18.2
S 53.42857142857143,25 58.349935306257734,17.63343017050729
L 59.23065242856076,16.31512403775182
S 64.78571428571428,8 69.09240847758271,17.025097514028683
L 73.2924185202937,25.826627993470822
S 76.14285714285714,31.8 81.82142857142857,28.4
L 81.82142857142857,28.4
S 87.5,25 92.42420103267804,20.577510015934436
L 93.17857142857143,19.9
S 98.85714285714286,14.8 103.0970844759733,21.146579278500923
L 106.53759956873661,26.296532687794436
S 110.21428571428571,31.8 115.89285714285714,35.2
L 115.89285714285714,35.2
S 121.57142857142857,38.6 124.42186719399201,32.62662799347083
L 128.621877236703,23.82509751402868
S 132.92857142857144,14.8 137.792791259808,23.537240149692863
L 139.4214944544777,26.46275985030714
S 144.28571428571428,35.2 148.5924084775827,26.174902485971316
L 151.3361629509887,20.425097514028685
S 155.64285714285714,11.399999999999999 159.1224146222211,20.775109585908968
L 167,42&quot; fill=&quot;#316BBE&quot; fill-opacity=&quot;0.1&quot; clip-path=&quot;url(#cut-off-bottom)&quot; stroke=&quot;url(#react-trend-vertical-gradient-9449655103672434)&quot;&gt;&lt;/path&gt;&lt;/svg&gt;

It renders fine when the first and last values are '0', but if I use '11' as the last value for example, it renders like this:

&lt;svg width=&quot;175&quot; height=&quot;50&quot; viewBox=&quot;0 0 175 50&quot; fill=&quot;true&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke=&quot;black&quot;&gt;&lt;defs&gt;&lt;linearGradient id=&quot;react-trend-vertical-gradient-214921560992256&quot; x1=&quot;0%&quot; y1=&quot;0%&quot; x2=&quot;0%&quot; y2=&quot;100%&quot;&gt;&lt;stop offset=&quot;0&quot; stop-color=&quot;#316BBE&quot;&gt;&lt;/stop&gt;&lt;stop offset=&quot;1&quot; stop-color=&quot;#316BBE&quot;&gt;&lt;/stop&gt;&lt;/linearGradient&gt;&lt;/defs&gt;&lt;clipPath id=&quot;cut-off-bottom&quot;&gt;&lt;rect x=&quot;0&quot; y=&quot;-8&quot; width=&quot;175&quot; height=&quot;50&quot;&gt;&lt;/rect&gt;&lt;/clipPath&gt;&lt;path id=&quot;react-trend-214921560992256&quot; d=&quot;M 8,42
L 16.28365848373006,28.473339834457946
S 19.357142857142858,23.454545454545453 25.035714285714285,25
L 25.035714285714285,25
S 30.714285714285715,26.545454545454547 34.69553752776538,22.211375956051867
L 36.39285714285714,20.363636363636367
S 42.07142857142857,14.181818181818183 47.75,20.363636363636363
L 47.75,20.363636363636367
S 53.42857142857143,26.545454545454547 58.399315977540795,19.781376771556836
L 59.107142857142854,18.81818181818182
S 64.78571428571428,11.09090909090909 69.24260104627207,19.581673348301074
L 73.13797820060304,27.002712043687463
S 76.14285714285714,32.72727272727273 81.82142857142857,29.636363636363637
L 81.82142857142857,29.636363636363637
S 87.5,26.545454545454547 92.50806084171919,22.456540376229277
L 93.17857142857143,21.90909090909091
S 98.85714285714286,17.272727272727273 103.1982846379807,23.180055710917145
L 106.38573439034217,27.51746589423348
S 110.21428571428571,32.72727272727273 115.89285714285714,35.81818181818181
L 115.89285714285714,35.81818181818181
S 121.57142857142857,38.90909090909091 124.57630751368266,33.18453022550565
L 128.28085740391924,26.127034379726176
S 132.92857142857144,17.272727272727273 138.1510407929314,25.800670385713047
L 139.0632449213543,27.290238705196046
S 144.28571428571428,35.81818181818182 148.93342831036648,26.963874711182914
L 152.63797820060304,19.906378865403447
S 155.64285714285714,14.181818181818183 161.32142857142856,11.090909090909092
L 167,8&quot; fill=&quot;#316BBE&quot; fill-opacity=&quot;0.1&quot; clip-path=&quot;url(#cut-off-bottom)&quot; stroke=&quot;url(#react-trend-vertical-gradient-214921560992256)&quot;&gt;&lt;/path&gt;&lt;/svg&gt;

How can I get it to only fill the area under the trend line? The svg is generated with react-trend.

答案1

得分: 6

在第一个路径上添加一个重复的路径，将第一个路径的 stroke 设置为 none，将第二个路径的 fill 设置为 none，并在第一个路径的 d 属性中添加 L 167,42 L 8,42 Z。

示例

英文:

Add a duplicate of the path, set stroke to none on the first path and fill to none on the second, and add L 167,42 L 8,42 Z to the d attribute of the first path.

Example

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

SVG填充路径下方的区域

问题

答案1

将SVG转换为图像

错误：ENOENT：没有此文件或目录，扫描目录 ‘pages’

跳过 chartjs 刻度标签，如果它们重叠。

NodeJS – TypeScript – 如果有多个参数，URL查询不起作用

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论