Firefox svg 符号转换

Posted

技术标签:

【中文标题】Firefox svg 符号转换【英文标题】：Firefox svg symbol transform 【发布时间】：2016-05-26 05:57:04 【问题描述】：

我在 Firefox 中使用 SVG 符号和 position: absolute with transform: translate(); 时出现意外行为；

这似乎只发生在 Firefox 中，而不是 IE 或 Chrome。我也有理由确定我以前没有遇到过这个问题，所以也许是一个新问题/错误？目前使用的是 43.0.4 (Windows)，也在 44.0.2 (Linux) 中测试过。

在this Plunkr 中，我希望地图指针、圆形和方形都位于边界框的中心。但是，在 Firefox 中，地图指针的位置不正确。地图指针是一个 SVG 符号。

更新：问题似乎只有在使用 svg 作为 CSS 选择器定位 SVG 时才会出现。如果通过 .icon 选择器设置样式，它将按预期工作。

代码：

#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"  >
        <rect   />
      </svg>
    </div>
  </body>

</html>

【问题讨论】：

这里在 Firefox 中看起来也不错。使用最新版本的 Firefox。 看来，如果我通过 svg 而不是 .icon 设置样式，它会在 Firefox 中被破坏，但在其他浏览器中则没有。为了整洁，我已经将 plunker 更新为一个类，这就是为什么它没有出现在 @ketan 我在 Mac 的 firefox 44.0.2 中看到了完美的 sn-p 和 plunker。它不以.icon 为目标，所以我不知道你为什么看错了 @PaulThomasGC 你说得对。如果我们将 css 定位到 svg 而不是 .icon 那么它在 Firefox 中看起来是错误的。 @MarcosPérezGude - 你知道你运行的是什么版本的FF吗？刚刚在 Mac 上尝试了 44.0.2，但它在那里无法正常工作。 【参考方案1】：

标题

在这里，我对您的代码进行了一些更改，这工作正常一些 css3 属性需要供应商特定的属性值，例如转换需要 -moz-transform 在 mozilla 中工作 -o-transform 在歌剧中工作 -webkit-transform 以使用 safari 和 chrome在某些关键情况下，您可能必须在使用 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"  >
        <rect   />
      </svg>
    </div>
  </body>

</html>

如果您将来发现任何类似的困难，请使用检查元素并检查所需的 css 类是否应用于该元素，并且大多数情况下检查元素也会为您提供正确的错误消息

【讨论】：

【参考方案2】：

我刚刚从 svg 中删除了 css transform，然后排列 top 和 left。它也在Firefox中工作。我想这可能是你所期待的答案。

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

<!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"  >
        <rect   />
      </svg>
    </div>
  </body>

</html>

【讨论】：

以上是关于Firefox svg 符号转换的主要内容，如果未能解决你的问题，请参考以下文章

Firefox 中的 SVG 过滤器转换

CSS 转换导致 SVG 在 Firefox 中摆动

Firefox 浏览器中的 SVG 路径元素缩放转换错误

更新SVG元素的转换时，Firefox会移动剪辑路径，而Chromium则不会 - 这是正确的，什么是便携式解决方案？

Firefox 上 CSS 动画前后的 SVG 模糊

在 Firefox 中的画布上下文对象上使用 svg 调用 drawImage() 时出现问题