请引用以下组中的clip-path
<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 -> “container_svg_symbolGroup1_0(即圆圈符号)在我删除图表中可见的剪辑路径时不可见。
问题是什么？为什么 transform 和 clip-path 在某些情况下不能一起工作？
如何显示上述剪辑路径的圆圈符号？
最佳答案
您有嵌套的剪辑路径，重复使用相同的路径两次。 删除内部剪辑路径，它就可以工作了。
(包装在 SVG 文档中):
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events">
<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)">
<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>
</svg>
此外，我将从 clipPath 内的矩形中删除 id="container_svg_ChartAreaClipRect"
关于svg - svg 中的剪辑路径和变换组合，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16480570/