es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Color de borde de la trayectoria de recorte

12 Jul, 2023 Programación

Hola, he recortado con éxito una ruta a una forma SVG y la he hecho escalable utilizando la documentación que encontré en línea.

Sin embargo, estoy intentando agregar un borde al recorte y no tengo éxito. No quiero superponer este recorte y agregar relleno ya que quiero que sea transparente.

Aquí está el código que he estado usando y el efecto que estoy tratando de recrear está adjunto en la imagen.

¡Gracias de antemano!

<svg height="0" width="0" viewbox="0 0 198.6 51.6" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Assets" fill="none">
        <defs>
            <clippath id="myClip" clippathunits="objectBoundingBox" transform="scale(0.00503524672, 0.01937984496)">
                <path class="st0" d="M176.9,51.1H7.7c-4,0-7.2-3.2-7.2-7.2V7.7c0-4,3.2-7.2,7.2-7.2h183.1c4,0,7.2,3.2,7.2,7.2v22.2
                c0,1.9-0.8,3.8-2.1,5.1L182,49C180.7,50.4,178.8,51.1,176.9,51.1z"></path>
            </clippath>
        </defs>
    </g>
</svg>

ejemplo de botón

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para agregar un borde a la ruta del clip, podemos usar la propiedad stroke. Aquí hay una versión actualizada del código con un borde negro que tiene un grosor de 3px:

    <svg height="0" width="0" viewbox="0 0 198.6 51.6" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Assets">
      <defs>
        <clippath id="myClip" clippathunits="objectBoundingBox" transform="scale(0.00503524672, 0.01937984496)">
            <path class="st0" d="M176.9,51.1H7.7c-4,0-7.2-3.2-7.2-7.2V7.7c0-4,3.2-7.2,7.2-7.2h183.1c4,0,7.2,3.2,7.2,7.2v22.2c0,1.9-0.8,3.8-2.1,5.1L182,49C180.7,50.4,178.8,51.1,176.9,51.1z"></path>
        </clippath>
      </defs>
      <rect class="btn_b" stroke="#000000" stroke-width="3" width="100%" height="100%"></rect>
    </g>
</svg>

<style>
  .btn_b {
    -webkit-clip-path: url(#myClip);
    clip-path: url(#myClip);
  }
</style>

    Agregamos un elemento rect dentro del elemento g y configuramos la propiedad stroke en #000000 (negro) con un stroke-width de 3. Esto creará un borde negro alrededor de la forma recortada.

    También eliminamos el atributo fill="none" del grupo Assets, ya que impedía que el elemento rect fuera visible.

    Con estos cambios, el botón debería tener ahora un borde negro alrededor de la forma recortada, manteniendo la transparencia.

Comments are closed.