svg - svg 中的剪辑路径和变换组合

Question

请引用以下组中的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 在某些情况下不能一起工作？

如何显示上述剪辑路径的圆圈符号？

Answer 1

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

(包装在 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"