Menu
I have a trend graph which looks like this:
<svg width="175" height="50" viewBox="0 0 175 50" fill="true" stroke-width="2" stroke-linecap="round" stroke="black"><defs><linearGradient id="react-trend-vertical-gradient-9449655103672434" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0" stop-color="#316BBE"></stop><stop offset="1" stop-color="#316BBE"></stop></linearGradient></defs><clipPath id="cut-off-bottom"><rect x="0" y="-8" width="175" height="50"></rect></clipPath><path id="react-trend-9449655103672434" d="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" fill="#316BBE" fill-opacity="0.1" clip-path="url(#cut-off-bottom)" stroke="url(#react-trend-vertical-gradient-9449655103672434)"></path></svg>
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:
<svg width="175" height="50" viewBox="0 0 175 50" fill="true" stroke-width="2" stroke-linecap="round" stroke="black"><defs><linearGradient id="react-trend-vertical-gradient-214921560992256" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0" stop-color="#316BBE"></stop><stop offset="1" stop-color="#316BBE"></stop></linearGradient></defs><clipPath id="cut-off-bottom"><rect x="0" y="-8" width="175" height="50"></rect></clipPath><path id="react-trend-214921560992256" d="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" fill="#316BBE" fill-opacity="0.1" clip-path="url(#cut-off-bottom)" stroke="url(#react-trend-vertical-gradient-214921560992256)"></path></svg>
How can I get it to only fill the area under the trend line? The svg is generated with react-trend.
485
Your best solution is probably going to be to use two <canvas> tags and write the fill portion over the container portion. That way you can calculate both separately and don't have to worry about a partial SVG file. Doing it this way, you'll have much greater control over everything.
The SVG fill property paints the interior of a graphic with a solid color, gradient, or pattern. Using SVG inline enables full control of such properties on elements throughout the SVG document fragment within HTML. In most cases what is considered to be the “inside” of a graphic is straightforward.
The CSS in the SVG is inline CSS and so is being applied after your stylsheet and thus is overriding it. The simplest solution is to xxtract the CSS from the SVG and put it all in your stylesheet. Show activity on this post. You'll need to select the polygon tag, since that tag is styled to have a stroke.
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
105
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
