So i have page 1 and page 2 which are animated, inside of page 2 there is also animation but problem is that this object shows when page 2 is "hidden". How to prevent that ??

Black square should only be visible when page 2 is visible, but it ignores parent style.

example https://jsfiddle.net/7kLzqfav/

Tried some css styling, z-index but nothing solved issue.

CodePudding user response：

animate the display property instead.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">

    <rect x="0.5" y="0.167" fill="#ccc" stroke="#000" width="100" height="100"/>
    <!-- square -->
    <g>
        <!-- page 1 -->
        <g id="page_one" style="z-index:1">
            <rect x="25" y="5" width="50" height="50" fill="red" style=""></rect>
        </g>



        <!-- page 2 -->
        <g id="page_two" style="z-index:-1">
            <rect x="25" y="5" width="50" height="50" fill="white" style=""></rect>
            <g transform="scale(2.9) translate(6,0)">   
                <g transform="scale(0.205)translate(1,1)">
                
                    <!-- animation inside page 2 -->
                    <g style="z-index:-1">
                        <animate attributeName="display" dur="2" repeatCount="indefinite" keyTimes="0;0.5;1" values="block;none;block"></animate>
                        <rect x="25" y="15" width="50" height="50" fill="black" style=""></rect>
                    </g>
                </g>
            </g>
        </g>
        
        <!-- animate page 1 & 2 -->
        <animate xlink:href="#page_one" attributeName="display" values="block;none" dur="4s" begin="0s" repeatCount="indefinite"></animate>
        <animate xlink:href="#page_two" attributeName="display" values="none;block" dur="4s" begin="0s" repeatCount="indefinite"></animate>
    </g>
</svg>