Question

我在Firefox中使用SVG符号和位置时出现意外行为：绝对值与transform：translate（）;

这似乎只发生在Firefox中，而不是IE或Chrome。我也有理由相信我之前没有遇到过这个问题，所以也许是一个新问题/错误？目前使用的是43.0.4（Windows），并且还在44.0.2（Linux）中进行了测试。

在this Plunkr中，我希望地图指针，圆圈和方形都位于边界框的中央。但是，在Firefox中，地图指针未正确定位。地图指针是SVG符号。

更新：只有在使用svg {}作为CSS选择器定位SVG时，问题才会出现。如果通过.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>

Answer 1

我刚从 svg 中删除了css 转换，然后排列顶部和左。它也在firefox中工作。我认为这可能是你期待的答案。

＆＃13;

#svg-sprite{
  position: absolute;
  width: 0;
  height: 0;
}

.rect{
  position: relative;
  width: 400px;
  height: 400px;
  background: #f00;
}

svg{
  position: absolute;
  top: 25%;
  left: 25%;
  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;
}

＆＃13;

<!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>

＆＃13;

Answer 2

标题

在这里，我对您的代码进行了一些更改，这很好用一些css3属性需要特定于供应商的属性值，例如转换需求uni2ascii -a U myfile.properties才能在mozilla -moz-transform中工作以在Opera -o-transform中工作使用safari和chrome并且在某些关键情况下你可能必须在使用css3 propeties时添加基本语句，因为某些css3属性不适用于IE 8或更低版本

-webkit-transform

#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;
}

如果你将来发现任何类似的困难，请使用inspect元素并检查所需的css类是否适用于该元素，并且大多数情况检查元素也会给你正确的错误信息

Firefox svg符号转换

2 个答案:

标题