剪辑路径并在“g"中翻译标签 svg [英] clip-path and translate in "g" tag svg

问题描述

我已经对我们的图表系列进行了分组，并在 svg 中使用了裁剪概念和转换逻辑

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>

请参考以下群组:

<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"标签中提到了正确的剪辑路径.

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.

我的问题是当我翻译g"标签时我无法使用剪辑路径"概念.为什么 ?当我单独使用剪辑路径时它工作正常但是当我同时使用它时它不显示图表.

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.

请参考下面的SVG截图.空图表

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.

谢谢，

湿婆

推荐答案

您的 clip-path 与您使用它的 g 元素进行相同的转换.看来您已经为目标位置设计了剪辑路径.如果你这样做，你必须用它的逆来抵消 g 元素上的变换，这样两个变换的串联就成为恒等变换.

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.

特别是，将您的 clip-path 定义更改为

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>

这篇关于剪辑路径并在“g"中翻译标签 svg的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！