Cómo especificar el degradado lineal svg en términos de un ángulo

Me gustaría especificar un degradado lineal SVG de forma que se duplique exactamente el comportamiento del degradado lineal CSS. En un gradiente de CSS, por ejemplo, puede especificar que un gradiente comience y termine en la esquina superior izquierda e inferior derecha de un recuadro, respectivamente. Cuando se cambia el tamaño de un cuadro, el degradado de fondo se adapta automáticamente al nuevo tamaño.Cómo especificar el degradado lineal svg en términos de un ángulo

En mi primer intento, dupliqué un degradado lineal de CSS con SVG, especificando un ángulo y calculando las coordenadas x1, y1, x2, y2 del tamaño de la casilla. Pero si se cambia el tamaño de la caja, el ángulo del degradado no cambia y ya no es correcto. (Tendría que recalcular todas las coordenadas).

Mi siguiente intento fue utilizar una transformación para rotar el degradado. Aquí hay algo de código:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> 
    <linearGradient id="g1" gradientUnits="userSpaceOnUse" 
     gradientTransform="rotate(-45 150 50)"> 
    <stop stop-color="#FF0000" offset="0"/> 
    <stop stop-color="#00FF00" offset="0.5"/> 
    <stop stop-color="#0000FF" offset="1"/> 
    </linearGradient> 
    <rect x="0" y="0" width="100%" height="100%" fill="url(#g1)" /> 
</svg>

Ahora, esto funciona para una caja de tamaño (300.100) pero se podrán ver que estoy tener que especificar los valores absolutos para el centro de rotación (150,50).

¿Puedo especificar el centro en términos de un porcentaje? Al final, quiero que el ángulo del degradado se adapte a las dimensiones de la caja.

Fuente

2012-02-24 Jules

Is gradientUnits = "objectBoundingBox" gradientTransform = "rotar (-45 0.5 0.5)" ¿qué estás buscando? –

Creo que lo he intentado porque comencé a usar objectBoundingBox, pero le daré otra oportunidad ... – Jules

Lo intenté de nuevo y no funciona. Lo que parece hacer es calcular el gradiente girado en una caja cuadrada, por lo que para -45 va de una esquina a otra. Luego, parece estirar el ancho, dejando el degradado tal como está. Si la caja era 100x100, entonces el ángulo sería correcto, pero en mi ejemplo, el ángulo termina mal. – Jules

SVG solo permite que los orígenes de rotación de transformación de gradiente sean specified in terms of absolute coordinates. Tendrá que establecer el origen de la rotación dinámicamente con JavaScript para hacer lo que creo que está buscando: rotar el gradiente, pero también hacer que las paradas de color se distribuyan uniformemente dentro del cuadro contenedor.

Fuente

2012-02-24 19:29:17

Gracias por la respuesta. Lo que trato de hacer es imitar exactamente el gradiente lineal de CSS. Todos los ejemplos en la red usan un degradado especificado en términos de un origen lateral o de esquina. Esto es fácil de imitar en svg y el efecto no cambiará si se cambia el tamaño de la caja. Un degradado CSS especificado en términos de un ángulo también se puede imitar calculando las coordenadas x1, y1, x2, y2 o rotando sobre el centro. El problema ocurre cuando la caja se redimensiona. Para que quede claro, ¿está diciendo que cuando se cambie el tamaño del cuadro, las coordenadas se deben volver a calcular para mantener la paridad con un degradado de CSS? – Jules

Sí, eso es lo que estoy diciendo. –

Cómo especificar el degradado lineal svg en términos de un ángulo

Respuesta

Cuestiones relacionadas