I grouped our series of diagrams and used the concept of cropping as well as converting logic to svg
See below the clip path. this refers to the area of the chart.
<defs><clipPath id="container_svg_ChartAreaClip"><rect id="container_svg_ChartAreaClipRect" x="65" y="46" width="715" height="428" fill="white" stroke-width="1" stroke="Gray"/></clipPath></defs>
Please refer to the group below:
<g clip-path="url(#container_svg_ChartAreaClip)" id="container_svg_SeriesCollection" transform="translate(65,474)"><path id="container_svg_John_0" fill="none" stroke-width="2" stroke="#AFB117" stroke-linecap="butt" stroke-linejoin="round" d="M 62.307142857141926 -0.09416 L 53.11428571428618 -0.5136 M 53.11428571428618 -0.5136 L 71.5 -0.27392 M 71.5 -0.27392 L 81.71428571428571 -0.9416000000000001 M 81.71428571428571 -0.9416000000000001 L 91.92857142857142 -2.0115999999999996 M 91.92857142857142 -2.0115999999999996 L 102.14285714285714 -3.15864 M 102.14285714285714 -3.15864 L 112.35714285714286 -5.478400000000001 M 112.35714285714286 -5.478400000000001 L 122.57142857142857 -8.602799999999998 M 122.57142857142857 -8.602799999999998 L 132.78571428571428 -12.292159999999999 M 132.78571428571428 -12.292159999999999 L 143 -17.659280000000003 M 143 -17.659280000000003 L 153.2142857142857 -26.16792 M 153.2142857142857 -26.16792 L 163.42857142857142 -39.530080000000005 M 163.42857142857142 -39.530080000000005 L 173.64285714285714 -55.16064 M 173.64285714285714 -55.16064 L 183.85714285714283 -84.07632 M 183.85714285714283 -84.07632 L 531.1428571428571 -126.59384 M 531.1428571428571 -126.59384 L 541.3571428571429 -115.92808 M 541.3571428571429 -115.92808 L 551.5714285714286 -109.62792000000002 M 551.5714285714286 -109.62792000000002 L 561.7857142857142 -103.61023999999999 M 561.7857142857142 -103.61023999999999 L 572 -94.98176000000001 M 572 -94.98176000000001 L 582.2142857142857 -87.57736 M 582.2142857142857 -87.57736 L 592.4285714285714 -86.8412 M 592.4285714285714 -86.8412 L 602.6428571428571 -86.38752000000001 M 602.6428571428571 -86.38752000000001 L 623.0714285714286 -92.33672 M 623.0714285714286 -92.33672 L 633.2857142857142 -93.23552 M 633.2857142857142 -93.23552 L 643.5 -88.58744 M 643.5 -88.58744 L 653.7142857142857 -87.60304000000001 M 653.7142857142857 -87.60304000000001 L 194.07142857142856 -132.40608 M 194.07142857142856 -132.40608 L 204.28571428571428 -174.13608 M 204.28571428571428 -174.13608 L 214.5 -206.51856 M 214.5 -206.51856 L 224.71428571428572 -234.43272 M 224.71428571428572 -234.43272 L 234.92857142857142 -252.16904000000002 M 234.92857142857142 -252.16904000000002 L 245.14285714285714 -265.83936 M 245.14285714285714 -265.83936 L 255.35714285714286 -274.2624 M 255.35714285714286 -274.2624 L 265.57142857142856 -267.35448 M 265.57142857142856 -267.35448 L 275.7857142857143 -267.26888 M 275.7857142857143 -267.26888 L 286 -250.15744 M 286 -250.15744 L 296.2142857142857 -234.04752 M 296.2142857142857 -234.04752 L 306.4285714285714 -228.22671999999997 M 306.4285714285714 -228.22671999999997 L 316.6428571428571 -230.70912000000004 M 316.6428571428571 -230.70912000000004 L 326.85714285714283 -238.92672 M 326.85714285714283 -238.92672 L 337.07142857142856 -248.23143999999996 M 337.07142857142856 -248.23143999999996 L 347.2857142857143 -247.9404 M 347.2857142857143 -247.9404 L 357.5 -238.19056 M 357.5 -238.19056 L 367.71428571428567 -218.95624 M 367.71428571428567 -218.95624 L 377.92857142857144 -220.18032 M 377.92857142857144 -220.18032 L 388.1428571428571 -206.58704 M 388.1428571428571 -206.58704 L 398.3571428571429 -208.3932 M 398.3571428571429 -208.3932 L 408.57142857142856 -210.29352 M 408.57142857142856 -210.29352 L 418.78571428571433 -196.98272 M 418.78571428571433 -196.98272 L 429 -198.72039999999998 M 429 -198.72039999999998 L 439.2142857142857 -205.62832 M 439.2142857142857 -205.62832 L 449.42857142857144 -209.31768 M 449.42857142857144 -209.31768 L 459.64285714285717 -210.67871999999997 M 459.64285714285717 -210.67871999999997 L 500.49999999999994 -195.99831999999998 M 500.49999999999994 -195.99831999999998 L 510.7142857142857 -186.02591999999999 "/><path id="container_svg_Andrew_1" fill="none" stroke-width="2" stroke="#479735" stroke-linecap="butt" stroke-linejoin="round" d="M 102.14285714285714 -4.28 L 112.35714285714286 -2.14 M 112.35714285714286 -2.14 L 122.57142857142857 -4.28 M 122.57142857142857 -4.28 L 132.78571428571428 -1.0272 M 132.78571428571428 -1.0272 L 143 -1.284 M 143 -1.284 L 153.2142857142857 -1.712 M 153.2142857142857 -1.712 L 163.42857142857142 -3.64656 M 163.42857142857142 -3.64656 L 173.64285714285714 -13.738799999999998 M 173.64285714285714 -13.738799999999998 L 183.85714285714283 -7.4386399999999995 M 183.85714285714283 -7.4386399999999995 L 194.07142857142856 -9.0736 M 194.07142857142856 -9.0736 L 204.28571428571428 -26.16792 M 204.28571428571428 -26.16792 L 214.5 -21.15176 M 214.5 -21.15176 L 224.71428571428572 -28.43632 M 224.71428571428572 -28.43632 L 234.92857142857142 -36.27728 M 234.92857142857142 -36.27728 L 245.14285714285714 -44.69176 M 245.14285714285714 -44.69176 L 255.35714285714286 -52.46424 M 255.35714285714286 -52.46424 L 265.57142857142856 -60.68184000000001 M 265.57142857142856 -60.68184000000001 L 275.7857142857143 -71.38184000000001 M 275.7857142857143 -71.38184000000001 L 286 -80.45544 M 286 -80.45544 L 296.2142857142857 -90.20528 M 296.2142857142857 -90.20528 L 306.4285714285714 -99.66408 M 306.4285714285714 -99.66408 L 316.6428571428571 -112.06752 M 316.6428571428571 -112.06752 L 326.85714285714283 -123.93168 M 326.85714285714283 -123.93168 L 337.07142857142856 -136.23239999999998 M 337.07142857142856 -136.23239999999998 L 347.2857142857143 -148.81560000000002 M 347.2857142857143 -148.81560000000002 L 357.5 -163.11079999999998 M 357.5 -163.11079999999998 L 367.71428571428567 -197.25664 M 367.71428571428567 -197.25664 L 377.92857142857144 -217.36408 M 377.92857142857144 -217.36408 L 388.1428571428571 -239.12359999999998 M 388.1428571428571 -239.12359999999998 L 398.3571428571429 -257.33072 M 398.3571428571429 -257.33072 L 408.57142857142856 -274.33944 M 408.57142857142856 -274.33944 L 418.78571428571433 -290.62912 M 418.78571428571433 -290.62912 L 429 -306.48224000000005 M 429 -306.48224000000005 L 480.07142857142856 -350.96 M 480.07142857142856 -350.96 L 531.1428571428571 -265.36 M 531.1428571428571 -265.36 L 541.3571428571429 -248.71079999999998 M 541.3571428571429 -248.71079999999998 L 551.5714285714286 -214 M 551.5714285714286 -214 L 561.7857142857142 -205.44 M 561.7857142857142 -205.44 L 572 -196.88 M 572 -196.88 L 582.2142857142857 -188.32 M 582.2142857142857 -188.32 L 592.4285714285714 -179.76 M 592.4285714285714 -179.76 L 602.6428571428571 -171.20000000000002 M 602.6428571428571 -171.20000000000002 L 623.0714285714286 -162.64000000000001 M 623.0714285714286 -162.64000000000001 L 633.2857142857142 -154.07999999999998 M 633.2857142857142 -154.07999999999998 L 643.5 -154.07999999999998 M 643.5 -154.07999999999998 L 653.7142857142857 -145.52 "/></g>
it will display a blank area of the chart instead of displaying a line chart in the chart area. when I delete the clip path, it works fine (i.e. displays a diagram) but the value of the clip ID and rectangle is correct. I mentioned the correct clip path in the "g" tag.
My question is, when I translated the "g" tag, that I can not use the concept of "clip-path". What for? when I use only the clip path, it works fine, but when I use both, it does not display the diagram.
Please refer to the SVG screenshot below. blank schedule
Please indicate the correct direction, not the update, as the clip path is wrong ?. I know the click path is correct.
Thanks,
Shiv
Sivarajini
source share