Dominar el atributo de límite de inglete de trazo de SVG | trucos CSS

Entonces, SVG tiene eso stroke-miterlimit atributo de presentación Probablemente lo haya visto al exportar SVG desde un editor de gráficos, o puede haber descubierto que puede eliminarlo sin notar un cambio en la apariencia visual.

Después de mucha investigación, una de las primeras cosas que descubrí fue que el atributo funciona en conjunto stroke-linejoiny le mostraré cómo, así como un montón de otras cosas que he aprendido sobre este atributo SVG interesante (y probablemente pasado por alto).

TLDR;

stroke-miterlimit depende stroke-linejoin: si usamos round o bevel para unirse, entonces no hay necesidad de declarar stroke-miterlimitPero si usamos miter en cambio, aún podemos eliminarlo, y tal vez el valor predeterminado sea suficiente. Tenga en cuenta que muchos editores de gráficos agregarán este atributo incluso cuando no sea necesario.

Que es stroke-linejoin?

Lo sé, en realidad estamos aquí para hablar. stroke-miterlimitpero quiero empezar con stroke-linejoin debido a lo cerca que trabajan juntos. Esta es la definición de stroke-linejoin descargado directamente del Grupo de Trabajo SVG (SVGWG):

stroke-linejoin determina la forma que se utilizará en las esquinas de los caminos o formas básicas cuando se dibujan.

Esto significa podemos definir cómo se ve un ángulo cuando dos líneas se encuentran en un puntoY este atributo acepta cinco valores posibles, aunque dos de ellos tienen sin conversión de navegador y son identificado por la especificación como amenazado de liberaciónEntonces, presentaré brevemente los tres valores admitidos que acepta el atributo.

miter es el valor predeterminado y resulta ser el más importante de los tres que estamos viendo. Si no declaramos explícitamente stroke-linejoin en el código SVG, entonces miter utilizado para dar forma al ángulo de la carretera. Sabemos que el compuesto se establece en miter cuando los dos bordes se encuentran en un ángulo agudo.

Pero también podemos elegir round que suaviza los bordes con, lo adivinaste, esquinas redondeadas.

EN bevel value, mientras tanto, crea un borde plano que parece una esquina recortada.

Que es stroke-miterlimit?

Bien, ahora que sabemos qué stroke-linejoin Bueno, volvamos al tema y elijamos la definición de stroke-miterlimit del libro Usando SVG con CSS3 y HTML5:

[…] en ángulos realmente estrechos, debe extender el curso una distancia considerable antes de que los dos bordes se encuentren. Por esta razón tiene una propiedad secundaria: stroke-miterlimitDetermina hasta dónde puede extender el punto al crear un ángulo de inclinación.

En otras palabras, stroke-miterlimit establece qué tan lejos van los bordes antes de encontrarse en un punto. y solo cuando stroke-linejoin es miter.

Así que eso stroke-miterlimit el valor puede ser cualquier entero positivo donde 4 es el valor predeterminado. Cuanto mayor sea el valor, más lejos puede ir la forma angular.

Cómo trabajan juntos

Probablemente ya tenga una buena comprensión conceptual de cómo stroke-linejoin y stroke-miterlimit trabajar juntos pero dependiendo de stroke-miterlimit valor, puede obtener algunos resultados aparentemente extraños.

Ejemplo: si stroke-linejoin se establece en miteren realidad puede parecer bevel valor en su lugar cuando el límite de pendiente es demasiado bajo. Aquí está la especificación de nuevo para ayudarnos a entender por qué:

Si la longitud de la pendiente dividida por el ancho del trazo excede stroke-miterlimit entonces [the miter value] se convierte en un bisel.

Entonces, matemáticamente podemos decir que esto:

[miter length] / [stroke width] > [stroke-miterlimit] = miter
[miter length] / [stroke width] < [stroke-miterlimit] = bevel

Eso tiene sentido, ¿no? Si el inglete no puede exceder el ancho del trazo, entonces debe ser un borde plano. De lo contrario, la mitra puede crecer y formar un punto.

A veces ver es fe, así que aquí está ana tudor con una maravillosa demostración que muestra cómo stroke-miterlimit el valor afecta a SVG stroke-linejoin:

Establecer límites de bisel en aplicaciones de diseño

¿Sabía que los conectores y las restricciones están disponibles en muchas de las aplicaciones de diseño que usamos en nuestro trabajo diario? Aquí es donde encontrarlos en Illustrator, Figma e Inkscape.

Establecer límites de inclinación en Adobe Illustrator

Illustrator tiene una forma de cambiar el valor de la pendiente al configurar la ruta. Puede encontrarlo en la configuración de "Trazo" en la carretera. Tenga en cuenta cómo, fiel a la especificación, solo podemos establecer un valor para "Límite" cuando "Esquina" en la carretera se establece en "Unión de inglete".

Un matiz es que Illustrator tiene un límite de inglete predeterminado de 10 en lugar del predeterminado 4. Me di cuenta de esto cada vez que exporto el archivo SVG o copio y pego el código SVG resultante. Esto puede ser confuso cuando abre el código porque incluso si no cambia el límite de inglete, Illustrator agrega stroke-miterlimit="10" donde puedes esperar 4 o tal vez no stroke-miterlimit en absoluto.

Y esto es cierto, incluso si elegimos lo contrario stroke-linejoin otro valor que no sea Unión a inglete. Aquí está el código que recibido al exportar SVG con stroke-linejoin="round".

<svg viewBox="0 0 16 10"><path stroke-width="2" stroke-linejoin="round" stroke-miterlimit="10" d="M0 1h15.8S4.8 5.5 2 9.5" fill="none" stroke="#000"/></svg>

EN stroke-miterlimit no debería estar allí ya que solo funciona con stroke-linejoin="miter"Aquí hay algunas soluciones a esto:

• Establezca el valor "Límite" en 4, ya que es el valor predeterminado en SVG y es el único valor que no aparece en el código.
• Use las opciones Exportar como o Exportar a pantalla en lugar de Guardar como o copie los vectores directamente.

Si quieres ver esto arreglado, únete a mí y votar para que la solicitud suceda.

Establecer límites de bisel en Figma

Los límites de conexión y bisel son ligeramente diferentes en Figma. Cuando hacemos clic en el nodo de la esquina de una figura, debajo de los tres puntos de la sección Trazo, podemos encontrar un lugar para establecer la unión del ángulo. La opción Ángulo de bisel aparece de forma predeterminada, pero solo cuando la unión está configurada en inglete:

Esta parte funciona de manera similar a Illustrator, excepto que Figma nos permite establecer el ángulo de inclinación en grados en lugar de valores decimales. Hay algunos otros matices específicos que debemos señalar:

• El ángulo es de 7,17° por defecto y no hay forma de establecer un valor inferior. Cuando exporta SVG, se produce este valor stroke-miterlimit="16'en el marcado, que difiere tanto de la especificación SVG como del valor estándar de Illustrator.
• El valor máximo es de 180° y al dibujar con esta opción la junta cambia automáticamente a bisel.
• Al exportar con una junta biselada, stroke-miterlimit tiene en el código, pero conserva el valor que se estableció cuando el ángulo de inclinación estuvo activo por última vez (Illustrator hace lo mismo).
• Cuando exportas un SVG con una conexión redonda, la ruta se ensancha y ya no tenemos un trazo, sino un color de relleno.

No pude encontrar una manera de evitar el código adicional que termina en el SVG exportado cuando stroke-miterlimit es innecesario

Establecer límites de pendiente en Inkscape

Inkscape funciona exactamente de la forma en que esperaría que una aplicación de diseño administrara la conectividad y las restricciones. Cuando selecciona una junta de inglete, el valor predeterminado es 4exactamente lo que está en la especificación. Aun mejor, stroke-miterlimit se excluye del código SVG exportado cuando el valor predeterminado!

Sin embargo, si exportamos cualquier ruta de bisel o círculo después de cambiar el límite, stroke-miterlimit estará en el código nuevamente, a menos que guardemos las 4 unidades predeterminadas en el campo Límite. Mismo truco que Illustrator.

Estos ejemplos funcionarán bien si elegimos Guardar como → SVG optimizado opción. Inkscape es gratuito y de código abierto y tiene el mejor código al final del día hasta ahora stroke-miterlimit también hay muchas opciones para optimizar el código de exportación.

Pero si está más familiarizado con Illustrator (como yo), hay una solución que debe tener en cuenta. Figma, debido a las unidades de grado y la expansión de los trazos, se siente más alejada de las especificaciones y comportamiento esperado.

resumiendo

Y eso es lo que aprendí sobre SVG stroke-miterlimit Esta es otra de esas cosas fáciles de ignorar que pueden convertirse en un corte ciego, especialmente cuando se optimiza un archivo SVG. Así que ahora que encuentras que estás sintonizando stroke-miterlimit sabrás lo que hace, cómo funciona en conjunto stroke-linejoiny por qué diablos obtienes una conexión biselada cuando estableces un límite de pendiente.