jquery svg - clip-path and translate in "g" tag svg

Question

I have grouped our chart series and using clipping concept as well as transform logic in svg

Please refer below clip path. it refers the chart area.

<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 below group :

<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 empty chart area instead of displaying line chart in chart area. when i removed the clip-path is working fine (i.e. it displays the chart) but clip-path id and rectangle value is correct. i have mentioned the correct clip-path in"g" tag.

my question is when am translating the "g" tag that time i can't able to use "clip-path" concept. why ? when i use clip-path alone it works fine but when am using both it doesn't display the chart.

Please refer below SVG screenshot. empty chart

Please provide the correct direction instead of updating like clip-path is wrong ?. i know clip-path is correct.

Thanks,

Siva

Answer 1

your clip-path is subjected to the same transformations as the g element where you use it. it seems that you have designed the clip path for the target position. if you do so, you have to offset the transformation on the g element with its inverse so the concatenation of both transformation becomes the identity transform.

specifically, alter your clip-pathdefinition into

    <clipPath id="container_svg_ChartAreaClip" transform="translate(-65,-474)">
        <rect id="container_svg_ChartAreaClipRect" x="65" y="46" width="715" height="428" fill="white" stroke-width="1" stroke="Gray"/>
    </clipPath>