clip-path并翻译成“g”标签svg

Question

我已将图表系列分组并使用剪辑概念以及svg中的转换逻辑

请参阅以下剪辑路径。它指的是图表区域。

<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>

请参考以下小组：

<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>

它将显示空图表区域，而不是在图表区域中显示折线图。 当我删除剪辑路径工作正常（即它显示图表） 但剪辑路径ID和矩形值是正确的。我在“g”标签中提到了正确的剪辑路径。

我的问题是在翻译“g”标签的时候，我无法使用“剪辑路径”概念。为什么？当我单独使用剪辑路径时，它可以正常工作，但是当它同时使用它时，它不会显示图表。

请参阅下面的SVG截图。空图表

请提供正确的方向，而不是更新像剪辑路径错误？我知道剪辑路径是正确的。

谢谢，

希瓦

Answer 1

您的clip-path与您使用它的g元素进行相同的转换。您似乎已经为目标位置设计了剪辑路径。如果你这样做，你必须用它的反转来抵消g元素上的变换，这样两个变换的连接就变成了身份变换。

具体而言，将您的clip-path定义更改为

    <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>