Clip-path and transform combination in svg

Question

Please refer to the following clip-path in group.

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

Group ID -> "container_svg_symbolGroup1_0 (I.e circle symbol) is not visible when I remove the clip-path is visible in chart.

What is the problem? Why transform and clip-path not working together in some cases?

How can I show circle symbol for above clip-path?

Answer 1

You have nested clip paths, reusing the same twice. Remove the inner clip path, and it works.

(Wrapped in an SVG document):

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

Also, I would remove id="container_svg_ChartAreaClipRect" from the rect inside the clipPath