Bisel interior hacia abajo SVG

Estoy tratando de reproducir esta imagen como SVG:

ingrese la descripción de la imagen aquí

Se hizo en Photoshop simplemente creando un rectángulo redondeado y configurando un estilo de capa de bisel interno, hacia abajo. (Es un poco difícil de ver en este sitio, ya que normalmente se muestra en un fondo más oscuro, pero el borde biselado está ahí).

¿Es posible reproducir este efecto con SVG? He experimentado con la configuración de un trazo con degradado, pero no parece ser correcto. Estoy usando Inkscape, pero también puedo acceder a Illustrator o editar el archivo SVG directamente. Cualquier ayuda para obtener el estilo de borde correcto (o cerca de él) sería muy apreciada. ¡Gracias!

Respuestas (1)

Como lo haría:

  • crea tu forma (rectángulo redondeado)
  • duplicar la forma (para que esté directamente en la parte superior)
  • dale al que está en la parte superior un relleno transparente y un color de borde (no importa el color del borde)
  • ajuste el ancho del trazo del borde para que sea el ancho de su bisel
  • elija RUTA --> OBJETO A RUTA y luego RUTA --> RUTA A OBJETO
  • su borde es ahora una forma rellenable. Dale a esta forma un borde transparente.
  • rellena esta forma con un degradado. Ajuste el degradado para que tenga una transición estrecha de claro a oscuro
  • hacer que la transición de este gradiente se divida en la parte inferior izquierda y superior derecha

Muestra rápida hecha en Inkscape:

ingrese la descripción de la imagen aquí

Gracias @DA01. De hecho, puedo dar un degradado al trazo sin duplicar el objeto. Esto funciona bien, pero no logra el mismo efecto. Creo que si pongo un ligero desenfoque en él, está más cerca del borde interior, pero luego necesito una máscara de algún tipo para endurecer el borde exterior. Seguiré trabajando en ello. Gracias por tu consejo.
Podrías hacer exactamente eso... darle un toque borroso, luego colocar todo dentro de una máscara para mantener el borde exterior duro.
Usando este tutorial: en.flossmanuals.net/Inkscape/ClipAndMask pude descifrar el enmascaramiento y acercarme a reproducir el efecto deseado. ¡Gracias por su ayuda!
Bisel interior hacia abajo SVG
RespuestasAquíPolítica de privacidad1y, 0v