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?
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?
Respuestas:
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>
Consulte jsfiddle .
stroke-dasharray
un 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
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/
Para obtener más información, lea sobre las formas <polyline>
más poderosas pero más confusas <path>
.