Login/Register
clip-path and translate in "g" tag svg
Asked Answered
Solved svgjquery-svg
S

1

1

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

enter image description here

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

Thanks,

Siva

Snippet answered 23/4, 2013 at 8:30 Comment(1)
the related question asked here. please refer below link.#14457309 – Snippet
T
7

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>
Tribe answered 23/4, 2013 at 9:52 Comment(4)
whether it works in all cases.. that means whether it will do correct clipping – Snippet
to make your code work in all cases you have to define the clip-path and the object you're clipping in the same coordinate system and subject both to the same transforms. – Tribe
thanks for reply. but same transform "g" element and clip rectangle element not working..only using your code snippet is working correctly . that means translate negative values in clip-path . why you are giving negative values for translation – Snippet
you have defined the clip window with coordinates of the target display area. at the same time, you draw the contents (your graphs) off the display area and move it to the target position. however, your clip-path is defined relative to the group containing your data to display. so the coordinates you use for data and clip-path do not agree. the translation added corrects this difference. the translation is negative because applying both translations in a row must result in the identity map - your clip-path data already has the proper display coordinates and must not change. – Tribe

© 2022 - 2024 — McMap. All rights reserved.