html - etiqueta - svg text size
Establecer origen de transformación en el grupo SVG no funciona en Firefox (8)
A partir de Firefox 55 (lanzado el 8 de agosto de 2017), la propiedad CSS "transform-box" ahora es compatible. Configurarlo en "fill-box" imitará al de Chrome con respecto al origen de la transformación en árboles SVG.
transform-origin: center; /* or transform-origin: 50% */
transform-box: fill-box;
Actualización 2017-9-14
Puede seleccionar los elementos que necesita dentro de la estructura SVG o, como señala Tom en los comentarios, simplemente puede aplicarlo a todas las descendencias del elemento SVG (siempre que el estilo no interfiera con ninguna otra cosa que esté intentando lograr):
svg .my-transformed-element {
transform-origin: center; /* or transform-origin: 50% */
transform-box: fill-box;
}
o
svg * {
transform-origin: center; /* or transform-origin: 50% */
transform-box: fill-box;
}
Tengo un problema para hacer que el origen de transformación funcione en Firefox (v.18 +, otras versiones no probadas). Los navegadores Webkit funcionan como se esperaba.
Intento establecer el origen en el centro del grupo, pero nada de lo que he probado ha funcionado hasta ahora.
Aquí está el código:
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<style>
#test{
-webkit-transform-origin: 50% 50%;
transform-origin: center center;
-webkit-animation: prop 2s infinite;
animation: prop 2s infinite;
}
@-webkit-keyframes prop {
0% { -webkit-transform: scale(1,1);}
20% { -webkit-transform: scale(1,.8);}
40% { -webkit-transform: scale(1,.6);}
50% { -webkit-transform: scale(1,.4);}
60% { -webkit-transform: scale(1,.2);}
70% { -webkit-transform: scale(1,.4);}
80% { -webkit-transform: scale(1,.6);}
90% { -webkit-transform: scale(1,.8);}
100% { -webkit-transform: scale(1,1);}
}
@keyframes prop {
0% { transform: matrix(1, 0, 0, 1, 0, 0);}
20% { transform: matrix(1, 0, 0, .8, 0, 0);}
40% { transform: matrix(1, 0, 0, .6, 0, 0);}
50% { transform: matrix(1, 0, 0, .4, 0, 0);}
60% { transform: matrix(1, 0, 0, .2, 0, 0);}
70% { transform: matrix(1, 0, 0, .4, 0, 0);}
80% { transform: matrix(1, 0, 0, .6, 0, 0);}
90% { transform: matrix(1, 0, 0, .8, 0, 0);}
100% { transform: matrix(1, 0, 0, 1, 0, 0);}
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128px" height="128px" viewBox="0 0 16 16">
<g id="test">
<rect fill="#404040" x="7.062" y="3.625" width="1.875" height="8.75"/>
</g>
</svg>
</body>
</html>
¡Gracias por tu ayuda!
Como una adición, puede considerar deshabilitar la animación para las versiones de Firefox que no son compatibles con transform-box: fill-box
Me gusta esto:
@supports (-moz-transform: rotate(0deg)) and (not (transform-box: fill-box)) {
#test {
animation: none;
}
}
La primera afirmación es solo para verificar si estás en Firefox, ya que no quieres deshabilitarlo en otros navegadores de todos modos. La segunda declaración verifica si la propiedad transform-box es compatible con el navegador. Lo usé en un proyecto actual y funciona como un encanto.
De acuerdo con los comentarios en este informe de fallas , el valor predeterminado de Firefox para transform-box es diferente al de Chrome. A partir de Firefox 55, esta propiedad ahora se puede establecer sin establecer una bandera.
Esto solucionó el problema para mí:
transform-box: fill-box
transform-origin: center center
FWIW, pude resolver mi problema con Greensock, usando TweenMax para animar rutas individuales en su interior, y esto funcionó en Firefox Gecko y navegadores Webkit (Safari / Chrome) Hace un mejor trabajo al calcular el origen (no estoy seguro de cómo, Pero funcionó para mí)
Tenía un SVG con dos engranajes que quería girar dentro de otra forma. Así que le di a cada equipo una identificación única (id = "gear1", id = "gear2") y luego los roté con Greensock, algo como esto:
TweenMax.to("#gear1", 3.2, {
repeat: -1, //repeat infintely
ease: Linear.easeNone, //no easing, linear motion
rotation:360, //amount to rotate (full)
transformOrigin:"center" //transform origin that WORKS :)
});
Lo mismo para # gear2 con tiempos ligeramente diferentes, y funciona muy bien en todos los navegadores.
Intentaba rotar un gráfico simple de engranaje de engranaje alrededor de su punto central usando una transición de CSS. Tuve el mismo problema que tú con Firefox; el origen de la transformación parecía no tener ningún efecto.
La solución fue dibujar la forma de svg original para que su centro estuviera en la coordenada 0, 0:
<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
<rect id="myObject" x="-50" y="-50" fill="#E52420" width="100" height="100"/>
</svg>
A continuación, agregue un grupo alrededor y traduzca a la posición que desee:
<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
<g transform="translate(150, 100)">
<rect id="myObject" x="-50" y="-50" fill="#E52420" width="100" height="100"/>
</g>
</svg>
Ahora puede aplicar transiciones CSS que deberían funcionar en Firefox (agrego una clase a la etiqueta HTML usando JavaScript en función de una acción del usuario ( js-rotateObject ) y uso Minimizr para verificar que el navegador pueda manejar transformaciones y transiciones ( .csstransforms.csstransitions )
#myObject{
transform: rotate(0deg);
transition: all 1s linear;
}
.csstransforms.csstransitions.js-rotateObject #myObject{
transform: rotate(360deg);
}
Espero que ayude.
La respuesta de @GrayGrey me funcionó a la perfección, pero necesitaba manejar un SVG mucho más complejo con varias rutas. Pude lograr esta solución usando Inkscape, pero fue un proceso de varios pasos. Recomiendo hacer esto con Inkscape XML Editor abierto para que pueda ver lo que está pasando.
Seleccione los elementos que desea transformar y elija Objeto> Grupo para crear un nuevo grupo. Arrastre este grupo para que se centre en la esquina superior izquierda del documento. Esto aplica un atributo
transform="translate(…, …)"al grupo.Elija Objeto> Desagrupar del menú. Esto "aplanará" el atributo de transformación, aplicando cualquier transformación de coordenadas a los elementos en el grupo.
Los elementos originales aún deben ser seleccionados. Elija Objeto> Agrupar para volver a colocarlos en un grupo. Si está utilizando CSS para transformar los elementos, agregue su
IDo atributo declassa este grupo (El editor XML es útil para este bit, o puede modificar el ID del grupo haciendo clic derecho y seleccionando Propiedades del objeto . para ser agregado a través del editor XML o más tarde en su editor de texto).Con el grupo seleccionado, elija Objeto> Agrupar de nuevo. Esto crea un nuevo grupo alrededor del grupo original.
Arrastre este nuevo grupo a la ubicación correcta en el documento. Si inspecciona el DOM utilizando el editor XML, verá que
transform="translate(…, …)"se agrega al grupo externo .Ahora, todas las transformaciones de CSS se pueden aplicar al grupo interno , y Chrome y Firefox las manejarán de forma coherente.
Gracias a @ PatrickGrey.co.uk por la visión inicial. La parte más complicada fue descubrir cómo aplicar la transformación inicial a las coordenadas del objeto complejo sin recurrir a tirar del pelo y realizar cálculos extensos. El truco "Agrupar, mover, desagrupar" se documentó en algunos lugares en , pero lo había olvidado hasta hoy. Afortunadamente, estos pasos pueden salvar a alguien más una buena cantidad de dolor.
Si puede usar un valor de píxel fijo, utilícelo para hacerlo funcionar.
-moz-transform-origin: 25px 25px;
-ms-transform-origin: 25px 25px;
-o-transform-origin: 25px 25px;
-webkit-transform-origin: 25px 25px;
transform-origin: 25px 25px;
Algunos navegadores aún no admiten el origen de transformación con valores porcentuales de la forma en que deberían hacerlo, al menos no en todas las situaciones. Si no tiene un valor de px fijo, calcule uno por javascript y use la biblioteca de su elección (como jQuery, Greensock, etc.) para establecer el valor.
-moz-transform-origin falta el -moz-transform-origin de -moz-transform-origin de su código css.
#test{
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
...
}