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

sintaxis svg

Question

Establecer un ancho de trazo: 1 en un elemento <rect> 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?

Answer 1

No puede cambiar el estilo visual de varias partes de una sola forma en SVG (no existe el módulo de efectos de Vector aún no disponible). 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 elemento <rect> o <polygon> , puede crear una <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> y más-powerful-but-more-confusing <path> .

Answer 2

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

Answer 3

Si necesita un trazo o un trazo nulo, también puede usar stroke-dasharray para hacer esto, haciendo que los trazos y las brechas 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 .