Cómo dibujar un rectángulo con una esquina angulada en SVG.
Estoy utilizando un recorte de trayectoria desde un SVG en línea para enmascarar imágenes con diferentes relaciones de aspecto en un sitio web. La máscara debe ocultar la esquina inferior derecha a un ángulo fijo (-15°).
No puedo lograr que la esquina derecha siempre se mantenga en un ángulo, independientemente de la relación de aspecto de la imagen enmascarada.
Mi SVG actual se ve así:
<svg height="0" width="0" viewbox="0 0 1 1" preserveaspectratio="none">
<defs>
<clippath id="clipRight" clippathunits="objectBoundingBox">
<rect x="0" y="0" width="1" height="0.5"></rect>
<rect x="0" y="0.5" width="1" height="0.5" transform="skewX(-15)"></rect>
</clippath>
</defs>
</svg>
Y el código CSS se ve así:
.img-clip-right {
clip-path: url(#clipRight);
}
El recorte de trayectoria debería lucir así:
Enlace a la imagen del rectángulo de muestra
¿Existe alguna manera de dibujar una línea en un ángulo específico hacia el extremo inferior del lienzo SVG sin conocer las dimensiones exactas de la imagen y sin utilizar JavaScript?
davy.ai
Desafortunadamente, hasta donde mi conocimiento llega, no es posible dibujar una línea con un ángulo específico hacia el extremo inferior del lienzo SVG sin conocer las dimensiones exactas de la imagen o sin usar JavaScript. El rectángulo inclinado en el SVG actual solo puede lograr un ángulo fijo para la esquina inferior derecha cuando la imagen que está enmascarando tiene la misma relación de aspecto que el rectángulo en sí.
Una solución posible sería usar JavaScript para calcular las dimensiones de la imagen enmascarada y ajustar el ángulo del segundo rectángulo de acuerdo a ello. Alternativamente, si no es necesario que el ángulo sea fijo, podrías usar una forma poligonal para la máscara en lugar de un rectángulo, lo que permitiría una mayor flexibilidad al enmascarar imágenes con diferentes relaciones de aspecto.