SVG动画在Firefox中不起作用

Question

I'm trying to set up a simple navi but I'm kinda stuck. 我正在尝试设置一个简单的navi，但是有点卡住了。 The Icon is transforming different in Firefox and Chrome, what am I doing wrong, is there a simple fix for this? Icon在Firefox和Chrome中正在发生变化，我在做什么错，有没有简单的解决方法？

http://jsfiddle.net/9usqz1zs/ http://jsfiddle.net/9usqz1zs/

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Only Navigation Menu</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="main.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
</head>
<body>
    <nav>
        <label for="show-menu" class="show-menu">
            <div class="burger">
              <svg id="svg-burger" version="1.1" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" xml:space="preserve">
                <g>
                  <rect class="top" y="20" fill="#454646" width="100" height="10" />
                  <rect class="middle" y="45" fill="#454646" width="100" height="10" />
                  <rect class="bottom" y="70" fill="#454646" width="100" height="10" />
                </g>
              </svg>
            </div>
        </label>
        <input type="checkbox" id="show-menu" role="button">
            <ul id="menu">
            <li><a href="#">Home</a></li>
            <li>
                <a href="#">About ￬</a>
                <ul class="hidden">
                    <li><a href="#">Who We Are</a></li>
                    <li><a href="#">What We Do</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Portfolio ￬</a>
                <ul class="hidden">
                    <li><a href="#">Photography</a></li>
                    <li><a href="#">Web & User Interface Design</a></li>
                    <li><a href="#">Illustration</a></li>
                </ul>
            </li>
            <li><a href="#">News</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

/*Reset CSS from http://meyerweb.com/eric/tools/css/reset/ */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

body {
    font-family: 'Oxygen', sans-serif;;
}
/*Strip the ul of padding and list styling*/
nav ul {
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;
}

/*Create a horizontal list with spacing*/
nav li {
    display:inline-block;
    float: left;
    margin-right: 1px;
}

/*Style for menu links*/
nav li a {
    display:block;
    min-width:140px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    background: #2f3036;
    text-decoration: none;
}

/*Hover state for top level links*/
nav li:hover a {
    background: #19c589;
}

/*Style for dropdown links*/
nav li:hover ul a {
    background: #f3f3f3;
    color: #2f3036;
    height: 40px;
    line-height: 40px;
}

/*Hover state for dropdown links*/
nav li:hover ul a:hover {
    background: #19c589;
    color: #fff;
}

/*Hide dropdown links until they are needed*/
nav li ul {
    display: none;
}

/*Make dropdown links vertical*/
nav li ul li {
    display: block;
    float: none;
}

/*Prevent text wrapping*/
nav li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
}

/*Display the dropdown on hover*/
nav ul li a:hover + .hidden, .hidden:hover {
    display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
    text-decoration: none;
    color: #fff;
    background: #19c589;
    text-align: center;
    padding: 10px 0;
    display: none;
}

/*Hide checkbox*/
nav input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
nav input[type=checkbox]:checked ~ #menu{
    display: block;
}

/*########################################################################################*/
h1 {
  text-transform: uppercase;
  color: #60C0B2;
}

#svg-burger,
#svg-arrow {
  height: 4rem;
}
#svg-burger line,
#svg-burger rect,
#svg-arrow line,
#svg-arrow rect {
  transition: all 0.2s ease-out;
}

.close #svg-burger rect:nth-of-type(1) {
  transform: rotate(45deg) translate(20%, -245%);
}
.close #svg-burger rect:nth-of-type(2) {
  opacity: 0;
}
.close #svg-burger rect:nth-of-type(3) {
  transform: rotate(-45deg) translate(-50%, -50%);
}

.open #svg-burger rect:nth-of-type(1) {
  transform: rotate(0) translate(0, 0);
}
.open #svg-burger rect:nth-of-type(2) {
  opacity: 1;
}
.open #svg-burger rect:nth-of-type(3) {
  transform: rotate(0) translate(0, 0);
}

.close #svg-arrow line:nth-of-type(1) {
  transform: translateX(42%);
}
.close #svg-arrow line:nth-of-type(2) {
  transform: translateX(-42%);
}

.open #svg-arrow line:nth-of-type(1) {
  transform: translateX(0);
}
.open #svg-arrow line:nth-of-type(2) {
  transform: translateX(0);
}

/*########################################################################################*/


/*Responsive Styles*/

@media screen and (max-width : 760px){
    /*Make dropdown links appear inline*/
    nav ul {
        position: static;
        display: none;
    }
    /*Create vertical spacing*/
    nav li {
        margin-bottom: 1px;
    }
    /*Make all menu links full width*/
    nav ul li, li a {
        width: 100%;
    }
    /*Display 'show menu' link*/
    .show-menu {
        display:block;
    }
}

$(document).ready(function() {
    (function () {
        $('.burger').on('click', function (e) {
            if ($(this).hasClass('close')) {
                return $(this).removeClass('close').addClass('open');
            } else {
                return $(this).addClass('close').removeClass('open');
            }
        });
    }.call(this));
});

Answer 1

Firefox does not support percentage based values for transform . Firefox不支持基于百分比的值进行转换。 You should go with px values and that should work well for you. 您应该使用px值，并且应该适合您。

.close #svg-burger rect:nth-of-type(3){
transform:rotate(-45deg) translate(-60px, -10px);
}

.close #svg-burger rect:nth-of-type(1){
transform:rotate(45deg) translate(15px, -15px);
}

The above changes should work fine for you giving the required animation . 上述更改应适合您提供所需的动画。

SVG动画在Firefox中不起作用

问题描述

1 个解决方案

解决方案1
0 2015-06-21 16:45:37

SVG动画在Firefox中不起作用

问题描述

1 个解决方案

解决方案1 0 2015-06-21 16:45:37

解决方案1
0 2015-06-21 16:45:37