scale not working?

M
MarEeeeeee2021-04-15 16:07:26
SVG
MarEeeeeee, 2021-04-15 16:07:26
scale not working?
I don't understand why scale doesn't work. If you set scale (0) initially, then it stops animating. (I put a comment at the problematic place in the code) What could be the problem?

https://codepen.io/mareeee/pen/QWdraqd
<body>
        <section class = "main">
            <svg width="100%" height="100vh" viewBox="0 0 1280 720" fill="none" preserveAspectRatio="none" class = "main" >
                <defs>
                    <polygon id="fig"
                                    class="logo"
                                    style="stroke: rgb(0, 0, 0); fill: rgb(235, 11, 11); background-color: black;"
                                    transform="translate(-185,-163)"
                                    points="190.492 149.86 186.232 156.783 195.951 174.49 155.412 174.823 160.204 182.811 209.797 182.744"
                                    >
                                    <animateTransform
                                    attributeName="transform"
                                    type="translate"
                                    
                                    values = "-185,-163; -145, -150; -185,-163"
                                    dur = "2s"
                                    fill = "freeze"
                                    />
                        </polygon>

                    <mask id = "mask">
                        <rect x="0" y="0" width="100%" height="100%" fill="#fff" />

                        <path 
                            d="M37.5 0L74.3061 63H0.69392L37.5 0Z"  
                            fill-opacity="1" 
                            fill = "red"
                            stroke="#17181c"   
                            stroke-width="2" 
                            transform-origin = "38px 40px"
                            transform = " translate(600, 360) scale(0)" // тут ошибка
                        > 
                            <animateTransform    
                            attributeName="transform"
                            type="scale"
                            from = "0"
                            to = "1"
                            dur = "25s"
                            repeatCount="1"
                            additive = "sum"
                            fill = "freeze"
                            begin = "0s"
                            
                            /> 
                            <animate
                                attributeName="d"
                                calMode="spline"
                                to = "M90.5 00L74.1231 63H0.69392L-20.5 0Z"
                                dur = "3s"
                                begin = "1s"
                                additive="sum"
                                repeatCount="1"
                                fill = "freeze"
                            />
                        </path>
                    </mask>
                </defs>
                
                       
                    
               
                <rect width="100%" height="100%" fill-opacity="1" fill="black" x = "0" y = "0" mask="url(#mask)"/>
                <g id = "my-mask"  x='0' y='0' width='100' height='100' transform = "translate(638, 401)">
                    <use href="#fig"></use>
                    <use href="#fig" transform="rotate(-120)"></use>
                    <use href="#fig" transform="rotate(120)"></use>
                    <!-- <animateTransform 
                        id = "rot"   
                        attributeName="transform"
                        type="rotate"
                        values="0;250;0"
                        dur = "2s"
                        
                        additive="sum"
                     /> 
                    <animateTransform    
                        attributeName="transform"
                        type="scale"
                        values = "1; 0,8; 25"
                        dur = "1s"
                        repeatCount="1"
                        additive="sum"
                        fill = "freeze"
                        begin = "rot.end"
                    
                     /> 
                    <animate
                        attributeName="d"
                        calMode="spline"
                        to = "M90.5 00L74.1231 63H0.69392L-20.5 0Z"
                        dur = "3s"
                        begin = "rot.end"
                        additive="sum"
                        repeatCount="1"
                        fill = "freeze"
                    /> -->
                </g>
            </svg>
        </section>   
    </body>