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

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

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

html svg vector-graphics inkscape user782860
fuente

Respuestas:

166

Si necesita trazo o ningún trazo, también puede usar stroke-dasharray para hacer esto, haciendo que los guiones y los 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>

Expandir fragmento

Consulte jsfiddle .

Erik Dahlström
fuente

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

Suresh

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

JacobIRR

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

Erik Dahlström

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

tripathy

Aquí hay una solución programática que genera stroke-dasharrayun objeto que define qué bordes deben mostrarse. Leer el código podría ayudarlo a comprender cómo funciona: codepen.io/lazd/pen/WNweNwy?editors=1010

lazd

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

Específicamente para este caso, en lugar de usar un elemento <rect>o <polygon>, puede crear un elemento <path>o <polyline>que solo cubra 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" />

Puede 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 sobre las formas <polyline>más poderosas pero más confusas <path>.

Phrogz
fuente

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

wdebeaum
fuente