svg change path not working in Firefox and Safari

Question

I have some SVG in my web page and I want to animate it on click and so I wrote the following code but it only works in Google Chrome and not in Firefox or Safari.

My code:

    $('#menu').click(function () {

        if ($(this).find('path:nth-child(1)').attr('d') === 'M12.972944,50.936147C12.972944,50.936147,51.027056,12.882035,51.027056,12.882035') {
            $(this).find('path:nth-child(1)').attr('d','M5.0916789,18.818994C5.0916789,18.818994,52.908321,18.818994,52.908321,18.818994');
            $(this).find('path:nth-child(2)').show('fast');
            $(this).find('path:nth-child(3)').attr('d','M5.0916788,44.95698C5.0916788,44.95698,52.908321,44.95698,52.908321,44.95698');
        }
        else {
            $(this).find('path:nth-child(1)').attr('d','M12.972944,50.936147C12.972944,50.936147,51.027056,12.882035,51.027056,12.882035');
            $(this).find('path:nth-child(2)').hide('fast');
            $(this).find('path:nth-child(3)').attr('d','M12.972944,12.882035000000002C12.972944,12.882035000000002,51.027056,50.936147,51.027056,50.936147');
        }

    });

*{

transition: all 0.5s ease 0.1s;

}         
#menu{
            padding: 0.78rem 1.22rem;
            cursor: pointer;
            display: inline-block;
            float: right;
            path{
              transition:all 300ms ease-in-out;
              -webkit-transition:all 300ms ease-in-out;
              -moz-transition:all 300ms ease-in-out;
              -ms-transition:all 300ms ease-in-out;
              -o-transition:all 300ms ease-in-out;
            }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="23" height="23" viewBox="0 0 64 64" id="menu" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <g>
                    		<path fill="none" stroke="#2A3033" stroke-width="6" stroke-linejoin="bevel" d="M5.0916789,18.818994C5.0916789,18.818994,52.908321,18.818994,52.908321,18.818994"></path>
                    		<path fill="none" stroke="#2A3033" stroke-width="6" stroke-linejoin="bevel" d="m 5.1969746,31.909063 47.8166424,0" transform="matrix(1,0,0,1,0,0)" style="opacity: 1;"></path>
                    		<path fill="none" stroke="#2A3033" stroke-width="6" stroke-linejoin="bevel" d="M5.0916788,44.95698C5.0916788,44.95698,52.908321,44.95698,52.908321,44.95698"></path>
                    	</g>
                    </svg>

Answer 1

You don't explain what you mean by "Not working". I am going to guess that you mean that the transitions are not working?

Currently only Chrome supports applying CSS animations and transitions on d attributes.

This is because d is not a style property. The SVG 1.1 specification states that only a defined set of properties could be styled with CSS. The list of those properties is in the SVG spec here:

https://www.w3.org/TR/SVG/propidx.html

The upcoming SVG2 spec is going to make most SVG attributes stylable via CSS. At that point hopefully all browsers will support CSS animations on them. But, as of now, only Chrome has started implementing this change.