文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Firefox svg符号转换

问Firefox svg符号转换
EN

Stack Overflow用户
提问于 2016-02-15 10:51:14
回答 2查看 1.1K关注 0票数 11

在使用SVG符号和位置时，我在Firefox中有意想不到的行为:绝对值与变换:翻译()；

这似乎只发生在火狐，而不是IE或Chrome。我也相当肯定我以前没有这个问题，所以也许是一个新的问题/错误？目前使用的是43.0.4 (Windows)，并在44.0.2 (Linux)中进行了测试。

在这个普朗克中，我希望映射指针、圆圈和正方形都集中在包围框中。但是，在Firefox中，映射指针的位置不正确。映射指针是SVG符号。

更新：只有在使用svg{}作为CSS选择器的情况下才会出现问题。如果通过.icon{}选择器进行样式设置，则它将按预期的方式工作。

代码：

​

代码语言：javascript
复制
#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;
}
代码语言：javascript
复制
<!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>

​

css
firefox
svg
symbols
EN

回答 2

Stack Overflow用户

发布于 2018-04-04 13:33:26

我刚刚将css 转换从svg中移除，然后排列顶级和left。它也在firefox中工作。我想这可能是你期待的答案。

​

代码语言：javascript
复制
#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;
}
代码语言：javascript
复制
<!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>

​

票数 2
EN

Stack Overflow用户

发布于 2017-08-22 12:48:39

标题

在这里，我对您的代码做了一些更改，这很好，一些css3属性需要特定于供应商的属性值，比如transform需要-moz-transform在mozilla中工作，-o-transform在opera -webkit-transform中工作，使用safari和chrome，在某些关键的情况下，您可能不得不在使用css3特性时添加基本语句，因为一些css3属性不适用于IE8或更低版本。

​

代码语言：javascript
复制
#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;
}
代码语言：javascript
复制
<!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>

​

将来，如果您发现类似的困难，请使用in元素并检查所需的css类是否适用于元素，并且大多数情况检查元素也会给出正确的错误消息。

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/35407415

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档