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.
<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="visibility" dur="2" repeatCount="indefinite" keyTimes="0;0.5;1" values="visible;hidden;visible"></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="visibility" values="visible;hidden" dur="4s" begin="0s" repeatCount="indefinite"></animate>
<animate xlink:href="#page_two" attributeName="visibility" values="hidden;visible" dur="4s" begin="0s" repeatCount="indefinite"></animate>
</g>
</svg>Tried some css styling, z-index but nothing solved issue.
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>