Pau*_*mas 11 css firefox svg symbols
我在Firefox中使用SVG符号和位置时出现意外行为:绝对值与transform:translate();
这似乎只发生在Firefox中,而不是IE或Chrome.我也有理由相信我之前没有遇到这个问题,所以也许是一个新问题/错误？目前使用43.0.4(Windows)并且还在44.0.2(Linux)中进行了测试.
在这个Plunkr中,我希望地图指针,圆形和方形都位于边界框的中央.但是,在Firefox中,地图指针未正确定位.地图指针是SVG符号.
更新:只有当SVG定位为使用svg {}作为CSS选择器时,问题才会出现.如果通过.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" width="200" height="200">
<rect width="200" height="200" />
</svg>
</div>
</body>
</html>Ara*_*ddy -1
在这里，我对您的代码进行了一些更改，这工作得很好，一些 css3 属性需要供应商特定的属性值，例如转换需要-moz-transform在 mozilla 中工作，-o-transform在 Opera 中工作-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" width="200" height="200">
<rect width="200" height="200" />
</svg>
</div>
</body>
</html>如果将来您发现任何类似的困难，请使用检查元素并检查所需的 css 类是否应用于该元素，大多数情况下检查元素也会给您正确的错误消息