svg中的裁剪路径与变换组合

请参考组中的以下剪辑路径

<g id="container_svg_SeriesCollection" clip-path="url(#container_svg_ChartAreaClipRect)"><defs>
<clipPath id="container_svg_ChartAreaClipRect">
<rect id="container_svg_ChartAreaClipRect" x="128.8" y="20" width="651.2" height="415" fill="white" stroke-width="1" stroke="Gray"/>
</clipPath>
</defs>
<g id="container_svg_symbolGroup_0" transform="translate(128.8,435)" clip-path="url(#container_svg_ChartAreaClipRect)">
<circle id="container_svg_circlesymbol_3_0" cx="86.8" cy="-25.875" r="7.0710678118654755" fill="url(#container_svg_symbol0Gradient)" stroke-width="1" stroke="Gray"/><circle id="container_svg_circlesymbol_4_0" cx="108.5" cy="-155.25" r="7.0710678118654755" fill="url(#container_svg_symbol0Gradient)" stroke-width="1" stroke="Gray"/></g>
</g>
</g>

组ID->“当我删除剪辑路径时，容器\u svg\u symbolGroup1\u 0（即圆形符号）不可见。剪辑路径在图表中可见

问题是什么？为什么变换和剪辑路径在某些情况下不能一起工作

---

如何为上述剪辑路径显示圆形符号？

您有嵌套剪辑路径，重复使用相同路径两次。 删除内部剪辑路径，它的工作

（包装在SVG文档中）：

---

另外，我将从clipPath中的rect中删除id=“container\u svg\u chartreaclicprect”

我自己找到了解决方案。请参考下面修改的svg

<g id="container_svg_SeriesCollection" clip-path="url(#container_svg_ChartAreaClipRect)"><defs><clipPath id="container_svg_ChartAreaClipRect"><rect id="container_svg_ChartAreaClipRect" x="132" y="20" width="648" height="346" fill="white" stroke-width="1" stroke="Gray"></rect></clipPath></defs><defs><linearGradient id="container_svg_John0Gradient" x1="0%" y1="0%" x2="0%" y2="600%"><stop offset="0" stop-color="pink" stop-opacity="1"></stop><stop offset="0.5" stop-color="blue" stop-opacity="1"></stop></linearGradient></defs><g id="container_svg_SeriesGroup_0" transform="translate(132,366)" clip-path="url(#container_svg_SeriesGroup_0_ClipRect)"><path id="container_svg_John_0" fill="none" stroke-dasharray="" stroke-width="3" stroke="url(#container_svg_John0Gradient)" stroke-linecap="butt" stroke-linejoin="round" d="M 64.8 -51.9 L 194.4 -69.2 M 194.4 -69.2 L 324 -138.4 M 324 -138.4 L 453.59999999999997 -103.8 M 453.59999999999997 -103.8 L 583.2 -43.25 "></path><defs><clipPath id="container_svg_SeriesGroup_0_ClipRect"><rect id="container_svg_SeriesGroup_0_ClipRect" x="64.80000305175781" y="-138.39999389648438" width="528.4000244140625" height="105.14999389648438" fill="white" stroke-width="1" stroke="transparent"></rect></clipPath></defs></g><g id="container_svg_TextGroup_0" transform="translate(132,366)"><text id="container_svg_SeriesText0" x="64.8" y="-68.9" fill="black" font-size="12px" font-family="Times New Roman" font-style="Normal " text-anchor="center" dominant-baseline="top">700</text><text id="container_svg_SeriesText1" x="194.4" y="-86.2" fill="black" font-size="12px" font-family="Times New Roman" font-style="Normal " text-anchor="center" dominant-baseline="top">800</text><text id="container_svg_SeriesText2" x="324" y="-155.4" fill="black" font-size="12px" font-family="Times New Roman" font-style="Normal " text-anchor="center" dominant-baseline="top">1200</text><text id="container_svg_SeriesText3" x="453.59999999999997" y="-120.8" fill="black" font-size="12px" font-family="Times New Roman" font-style="Normal " text-anchor="center" dominant-baseline="top">1000</text><text id="container_svg_SeriesText4" x="583.2" y="-60.25" fill="black" font-size="12px" font-family="Times New Roman" font-style="Normal " text-anchor="center" dominant-baseline="top">650</text></g><g id="container_svg_symbolGroup_0" transform="translate(132,366)"><defs><linearGradient id="container_svg_symbol0Gradient" x1="0%" y1="0%" x2="0%" y2="600%"><stop offset="0" stop-color="yellow" stop-opacity="1"></stop><stop offset="0.5" stop-color="blue" stop-opacity="1"></stop></linearGradient></defs><circle id="container_svg_circlesymbol_0_0" cx="64.8" cy="-51.9" r="7.0710678118654755" fill="url(#container_svg_symbol0Gradient)" stroke-width="1" stroke="Gray"></circle><circle id="container_svg_circlesymbol_1_0" cx="194.4" cy="-69.2" r="7.0710678118654755" fill="url(#container_svg_symbol0Gradient)" stroke-width="1" stroke="Gray"></circle><circle id="container_svg_circlesymbol_2_0" cx="324" cy="-138.4" r="7.0710678118654755" fill="url(#container_svg_symbol0Gradient)" stroke-width="1" stroke="Gray"></circle><circle id="container_svg_circlesymbol_3_0" cx="453.59999999999997" cy="-103.8" r="7.0710678118654755" fill="url(#container_svg_symbol0Gradient)" stroke-width="1" stroke="Gray"></circle><circle id="container_svg_circlesymbol_4_0" cx="583.2" cy="-43.25" r="7.0710678118654755" fill="url(#container_svg_symbol0Gradient)" stroke-width="1" stroke="Gray"></circle></g></g>

70080012001000650

问题在于父组和子组中使用了多个相同的剪辑路径

我已经将子组剪辑路径修改为其他剪辑路径，然后工作正常

因此，不需要为父组和子组设置相同的剪辑路径。如果要为子组设置剪辑路径，则表示剪辑路径边界将小于父剪辑路径

谢谢

---

Siva

谢谢。这是一个很好的观点。但实际上我的问题不同。我还需要为儿童组设置剪辑路径。我找到了解决方案，请查看我的更新答案。

<g id="container_svg_SeriesCollection" clip-path="url(#container_svg_ChartAreaClipRect)"><defs><clipPath id="container_svg_ChartAreaClipRect"><rect id="container_svg_ChartAreaClipRect" x="132" y="20" width="648" height="346" fill="white" stroke-width="1" stroke="Gray"></rect></clipPath></defs><defs><linearGradient id="container_svg_John0Gradient" x1="0%" y1="0%" x2="0%" y2="600%"><stop offset="0" stop-color="pink" stop-opacity="1"></stop><stop offset="0.5" stop-color="blue" stop-opacity="1"></stop></linearGradient></defs><g id="container_svg_SeriesGroup_0" transform="translate(132,366)" clip-path="url(#container_svg_SeriesGroup_0_ClipRect)"><path id="container_svg_John_0" fill="none" stroke-dasharray="" stroke-width="3" stroke="url(#container_svg_John0Gradient)" stroke-linecap="butt" stroke-linejoin="round" d="M 64.8 -51.9 L 194.4 -69.2 M 194.4 -69.2 L 324 -138.4 M 324 -138.4 L 453.59999999999997 -103.8 M 453.59999999999997 -103.8 L 583.2 -43.25 "></path><defs><clipPath id="container_svg_SeriesGroup_0_ClipRect"><rect id="container_svg_SeriesGroup_0_ClipRect" x="64.80000305175781" y="-138.39999389648438" width="528.4000244140625" height="105.14999389648438" fill="white" stroke-width="1" stroke="transparent"></rect></clipPath></defs></g><g id="container_svg_TextGroup_0" transform="translate(132,366)"><text id="container_svg_SeriesText0" x="64.8" y="-68.9" fill="black" font-size="12px" font-family="Times New Roman" font-style="Normal " text-anchor="center" dominant-baseline="top">700</text><text id="container_svg_SeriesText1" x="194.4" y="-86.2" fill="black" font-size="12px" font-family="Times New Roman" font-style="Normal " text-anchor="center" dominant-baseline="top">800</text><text id="container_svg_SeriesText2" x="324" y="-155.4" fill="black" font-size="12px" font-family="Times New Roman" font-style="Normal " text-anchor="center" dominant-baseline="top">1200</text><text id="container_svg_SeriesText3" x="453.59999999999997" y="-120.8" fill="black" font-size="12px" font-family="Times New Roman" font-style="Normal " text-anchor="center" dominant-baseline="top">1000</text><text id="container_svg_SeriesText4" x="583.2" y="-60.25" fill="black" font-size="12px" font-family="Times New Roman" font-style="Normal " text-anchor="center" dominant-baseline="top">650</text></g><g id="container_svg_symbolGroup_0" transform="translate(132,366)"><defs><linearGradient id="container_svg_symbol0Gradient" x1="0%" y1="0%" x2="0%" y2="600%"><stop offset="0" stop-color="yellow" stop-opacity="1"></stop><stop offset="0.5" stop-color="blue" stop-opacity="1"></stop></linearGradient></defs><circle id="container_svg_circlesymbol_0_0" cx="64.8" cy="-51.9" r="7.0710678118654755" fill="url(#container_svg_symbol0Gradient)" stroke-width="1" stroke="Gray"></circle><circle id="container_svg_circlesymbol_1_0" cx="194.4" cy="-69.2" r="7.0710678118654755" fill="url(#container_svg_symbol0Gradient)" stroke-width="1" stroke="Gray"></circle><circle id="container_svg_circlesymbol_2_0" cx="324" cy="-138.4" r="7.0710678118654755" fill="url(#container_svg_symbol0Gradient)" stroke-width="1" stroke="Gray"></circle><circle id="container_svg_circlesymbol_3_0" cx="453.59999999999997" cy="-103.8" r="7.0710678118654755" fill="url(#container_svg_symbol0Gradient)" stroke-width="1" stroke="Gray"></circle><circle id="container_svg_circlesymbol_4_0" cx="583.2" cy="-43.25" r="7.0710678118654755" fill="url(#container_svg_symbol0Gradient)" stroke-width="1" stroke="Gray"></circle></g></g>