Преобразование символов svg в Firefox

У меня неожиданное поведение в Firefox при использовании SVG-символов и позиции: absolute with transform: translate();

Это похоже только на Firefox, а не на IE или Chrome. Я также уверен, что раньше у меня не было этой проблемы, возможно, это новая проблема/ошибка? В настоящее время используется 43.0.4 (Windows), а также протестировано в 44.0.2 (Linux).

В this Plunkr Я бы ожидал, что указатель карты, круг и квадрат будут размещены централизованно в ограничивающей рамке. Однако в Firefox указатель карты расположен неправильно. Указатель карты представляет собой символ SVG.

update: проблема кажется самой, только если SVG позиционируется с помощью svg {} в качестве селектора CSS. Он работает так, как ожидалось, если он создан с помощью селектора .icon {}.

CODE:

#svg-sprite{
  position: absolute;
  width: 0;
  height: 0;
}

.rect{
  position: relative;
  width: 400px;
  height: 400px;
  background: #f00;
}

svg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  fill: #fff;
  opacity: 0.5;
}

.circle{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: #0f0;
  border-radius: 50%;
  opacity: 0.5;
}

.square{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  fill: #0f0;
  opacity: 0.5;
}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    
    <svg id="svg-sprite">
      <symbol viewBox="0 0 42 60" id="map_pointer"><title>map_pointer</title><path d="M21 .254C9.52.254.178 9.594.178 21.076c0 11.153 19.208 37.167 20.026 38.27.187.25.483.4.796.4.313 0 .61-.15.796-.4.818-1.103 20.026-27.117 20.026-38.27C41.822 9.596 32.482.254 21 .254zM21 30c-4.92 0-8.924-4.003-8.924-8.924 0-4.92 4.003-8.923 8.924-8.923 4.92 0 8.924 4.002 8.924 8.923C29.924 25.996 25.92 30 21 30z"/></symbol>
    </svg>
    
    <p>SVG icon should be positioned in centre of rectangle. In Firefox this is not the case</p>
    
    <div class="rect">
      <svg class="icon"><use xlink:href="#map_pointer" /></svg>
      
      <div class="circle"></div>
      
      <svg class="square" width="200" height="200">
        <rect width="200" height="200" />
      </svg>
    </div>
  </body>

</html>

Ответы

Ответ 1

Заголовок

Здесь я внес некоторые изменения в ваш код, и это отлично работает, некоторые свойства css3 требуют специальных значений свойств поставщика, таких как преобразование потребностей -moz-transform для работы в mozilla -o-transform для работы в opera -webkit-transform для работы с сафари и хром и в некоторых критических случаях вам может потребоваться добавить базовый оператор при использовании css3-программ, потому что некоторые свойства css3 не работают с IE 8 или ниже

#svg-sprite{
  position: absolute;
  width: 0;
  height: 0;
}

.rect{
  position: relative;
  width: 400px;
  height: 400px;
  background: #f00;
}

svg{
  position: absolute;
  top: 25%;
  left: 25%;
  -webkit-transform: translate(0% , 0% );
    -moz-transform: translate(0% , 0% );
    -ms-transform: translate(0% , 0% );
    -o-transform: translate(0% , 0% );
   transform: translate(0% , 0%);
  width: 200px;
  height: 200px;
  fill: #fff;
  opacity: 0.5;
}

.circle{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50% , -50%);
    -moz-transform: translate(-50% , -50%);
    -ms-transform: translate(-50% , -50%);
    -o-transform: translate(-50% , -50%);
   
  width: 200px;
  height: 200px;
  background: #0f0;
  border-radius: 50%;
  opacity: 0.5;
}

.square{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50% , -50%);
    -moz-transform: translate(-50% , -50%);
    -ms-transform: translate(-50% , -50%);
    -o-transform: translate(-50% , -50%);
    
  width: 200px;
  height: 200px;
  fill: #0f0;
  opacity: 0.5;
}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    
    <svg id="svg-sprite">
      <symbol viewBox="0 0 42 60" id="map_pointer"><title>map_pointer</title><path d="M21 .254C9.52.254.178 9.594.178 21.076c0 11.153 19.208 37.167 20.026 38.27.187.25.483.4.796.4.313 0 .61-.15.796-.4.818-1.103 20.026-27.117 20.026-38.27C41.822 9.596 32.482.254 21 .254zM21 30c-4.92 0-8.924-4.003-8.924-8.924 0-4.92 4.003-8.923 8.924-8.923 4.92 0 8.924 4.002 8.924 8.923C29.924 25.996 25.92 30 21 30z"/></symbol>
    </svg>
    
    <p>SVG icon should be positioned in centre of rectangle. In Firefox this is not the case</p>
    
    <div class="rect">
      <svg class="icon"><use xlink:href="#map_pointer" /></svg>
      
      <div class="circle"></div>
      
      <svg class="square" width="200" height="200">
        <rect width="200" height="200" />
      </svg>
    </div>
  </body>

</html>