¿Cómo establecer un ancho de trazo: 1 solo en ciertos lados de las formas SVG?

2 minutos de lectura

¿Cómo establecer un ancho de trazo: 1 solo en ciertos lados de las formas SVG?
usuario782860

Establecer un ancho de trazo: 1 en a <rect> elemento en SVG coloca un trazo en cada lado del rectángulo.

¿Cómo se coloca un ancho de trazo en solo tres lados de un rectángulo SVG?

¿Cómo establecer un ancho de trazo: 1 solo en ciertos lados de las formas SVG?
Erik Dahlström

Si necesita carrera o sin carrera, también puede usar trazo-dasharray para hacer esto, haciendo que los guiones y espacios coincidan con los lados del rectángulo.

rect { fill: none; stroke: black; }
.top { stroke-dasharray: 0,50,150 }
.left { stroke-dasharray: 150,50 }
.bottom { stroke-dasharray: 100,50 }
.right { stroke-dasharray: 50,50,100 }
<svg height="300">
    <rect x="0.5" y="0.5" width="50" height="50" class="top"/>
    <rect x="0.5" y="60.5" width="50" height="50" class="left"/>
    <rect x="0.5" y="120.5" width="50" height="50" class="bottom"/>
    <rect x="0.5" y="180.5" width="50" height="50" class="right"/>
</svg>

Ver jsfiddle.

  • ¿Cómo podemos mostrar el trazo solo encima del elemento rect?

    – Claro

    22 ago. 18 en 07:48

  • ¿Podría explicar por qué ciertos números en ciertas posiciones dan este efecto?

    – JacobIRR

    30 abr.

  • @JacobIRR consulte la definición de la propiedad ‘stroke-dasharray’ (vinculada en la respuesta). La idea aquí es hacer coincidir las longitudes de los trazos con los lados del rectángulo y el espacio entre trazos con el lado que no debería tener trazos.

    – Erik Dahlström

    06 may. 19 en 13:49

  • Acabo de actualizar su solución, en este enlace codepen.io/shaswatatripathy/pen/oNgPpyd

    – tripatía

    16 ene.

  • Esta es una solución programática que genera stroke-dasharray dado un objeto que define qué bordes deben mostrarse. Leer el código puede ayudarte a comprender cómo funciona: codepen.io/lazd/pen/WNweNwy?editors=1010

    – lazd

    02 ago. 2020 20:14

¿Cómo establecer un ancho de trazo: 1 solo en ciertos lados de las formas SVG?
Phrogz

No puede cambiar el estilo visual de varias partes de una sola forma en SVG (falta el estilo aún no disponible). Efectos vectoriales módulo). En su lugar, deberá crear formas separadas para cada trazo u otro estilo visual que desee variar.

Específicamente para este caso, en lugar de usar un <rect> o <polygon> elemento se puede crear un <path> o <polyline> que solo cubre tres lados del rectángulo:

<!-- Move to 50,50 then draw a line to 150,50, to 150,150, and then to 50,150 -->
<path d="M50,50 L150,50 150,150 50,150" />
<polyline points="50,50 150,50 150,150 50,150" />

Puedes ver el efecto de estos en acción aquí: http://jsfiddle.net/b5FrF/3/

Cuadrado rojo con trazo en tres lados

Para obtener más información, lea acerca de la <polyline> y más-poderoso-pero-más-confuso <path> formas

Puede usar una polilínea para los tres lados trazados y simplemente no colocar el trazo en el rectángulo. No creo que SVG le permita aplicar diferentes trazos a diferentes partes de una ruta/forma, por lo que necesita usar varios objetos para obtener el mismo efecto.

.

¿Ha sido útil esta solución?