Menu
I am having unexpected behaviour in Firefox while using SVG symbols and position: absolute with transform: translate();
This only seems to be happening in Firefox, not IE or Chrome. I am also reasonably sure I wasn't having this issue previously, so perhaps is a new issue/bug? Currently using 43.0.4 (Windows) and have also tested in 44.0.2 (Linux).
In this Plunkr I would expect the map pointer, circle and square all to be positioned centrally within the bounding box. However, in Firefox the map pointer is not positioned correctly. The map pointer is an SVG symbol.
update: the issue seems to present itself only if the SVG is positioned using svg{} as the CSS selector. It works as expected if it is styled via the .icon{} selector.
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>
869
I've just removed the css transform from the svg then arrange the top and left. It's working in firefox too. I think it may the answer you are expecting.
#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" width="200" height="200">
<rect width="200" height="200" />
</svg>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
