css - español - Transformación de símbolo svg de Firefox
svg viewbox (1)
Título
Aquí hice algunos cambios en su código y esto funciona bien algunas propiedades de css3 necesitan valores de propiedad específicos del proveedor como necesidades de transformación -moz-transform para trabajar en mozilla -o-transform para trabajar en opera -webkit-transform para trabajar con safari y cromo y en algunos casos críticos, puede que tenga que agregar una declaración base al usar css3 propeties porque algunas de las propiedades de css3 no funcionan con IE 8 o inferior
#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>
y en caso de que en el futuro, si encuentra alguna dificultad similar, use el elemento de inspección y compruebe si la clase de CSS deseada se aplica para el elemento o no, y la mayoría de los casos, el elemento de inspección le proporcionará el mensaje de error adecuado.
Estoy teniendo un comportamiento inesperado en Firefox al usar símbolos SVG y posición: absolute con transform: translate ();
Esto solo parece estar sucediendo en Firefox, no en IE o Chrome. También estoy razonablemente seguro de que no estaba teniendo este problema anteriormente, entonces tal vez es un nuevo problema / error? Actualmente usa 43.0.4 (Windows) y también lo he probado en 44.0.2 (Linux).
En este Plunkr , esperaría que el puntero del mapa, el círculo y el cuadrado estuvieran ubicados centralmente dentro del cuadro delimitador. Sin embargo, en Firefox, el puntero del mapa no está colocado correctamente. El puntero del mapa es un símbolo SVG.
actualización: el problema parece presentarse solo si el SVG se posiciona usando svg {} como el selector de CSS. Funciona de la manera esperada si se configura con el selector .icon {}.
CÓDIGO:
#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>