Como definir a largura do traço: 1 em apenas alguns lados das formas SVG?

Definir a largura do traço: 1 em um <rect>elemento em SVG coloca um traço em cada lado do retângulo.

Como colocar uma largura de traço em apenas três lados de um retângulo SVG?

— user782860
fonte

Respostas:

166

Se precisar de traço ou não, você também pode usar stroke-dasharray para fazer isso, fazendo com que os travessões e as lacunas correspondam aos lados do retâ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 trecho

Veja jsfiddle .

— Erik Dahlström
fonte

Como podemos mostrar o traço apenas no topo do elemento ret?

— Suresh

Você poderia explicar por que certos números em certas posições dão esse efeito?

— JacobIRR

@JacobIRR referem-se à definição da propriedade 'stroke-dasharray' (link na resposta). A ideia aqui é combinar o comprimento do traço com os lados do retângulo e a lacuna do traço com o lado que não deve ter traço.

— Erik Dahlström

Acabei de atualizar sua solução, neste link codepen.io/shaswatatripathy/pen/oNgPpyd

— tripathy

Aqui está uma solução programática que gera stroke-dasharrayum determinado objeto que define quais bordas devem ser mostradas. Ler o código pode ajudá-lo a entender como ele funciona: codepen.io/lazd/pen/WNweNwy?editors=1010

— lazd

Não é possível alterar o estilo visual de várias partes de uma única forma em SVG (ausência do módulo Vector Effects ainda não disponível ). Em vez disso, você precisará criar formas separadas para cada traço ou outro estilo visual que deseja variar.

Especificamente para este caso, em vez de usar um elemento <rect>ou <polygon>, você pode criar um <path>ou <polyline>que cubra apenas três lados do retâ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" />

Você pode ver o efeito disso em ação aqui: http://jsfiddle.net/b5FrF/3/

Quadrado vermelho com traço em três lados

Para obter mais informações, leia sobre as formas <polyline>mais poderosas, porém mais confusas <path>.

— Phrogz
fonte

Você poderia usar uma polilinha para os três lados traçados e simplesmente não colocar o traço no retângulo. Não acho que o SVG permite aplicar traços diferentes a partes diferentes de um caminho / forma, portanto, você precisa usar vários objetos para obter o mesmo efeito.

— Wdebeaum
fonte