A sobreposição de Tracejada / Pontilhada Traços Adjacentes Caminhos em SVG

Question

Eu estou construindo um mapa de vários concelhos que compartilham fronteiras.Cada município é sua própria fechado caminho, e, portanto, as fronteiras de municípios adjacentes são empilhadas uma sobre a outra.

Eu gostaria de dar a cada município um traço tracejada.No entanto, quando aplicado, a intersecção das fronteiras olhar feio como o tracejado das fronteiras de cada município se sobrepõem, criando uma desigual traço aparência.

O meu blog vai ser a seleção de municípios ao passar o mouse sobre a área dentro do município de fronteiras, assim (eu acho) torna-se necessário criar um fechado caminho para cada município.

Soluções?

Answer 1

Acabei resolvendo isso de forma diferente do que qualquer uma das sugestões.Eu postei outro, maisPergunta específica aqui .(Veja minha resposta)

Uma vez que eu completei as etapas, descrevi na outra pergunta, convertei o shapefile de volta para Geojson e carregou no meu mapa.Eu não removi o geojson que incluí os polígonos inteiros, mas simplesmente desligou o estilo de fronteira nessa camada.Eu então apliquei as mesmas estilos de camada para o geojson dissolvido, e desta vez com um derrame tracejado.

Imagem do resultado aqui.

Answer 2

Sim, os caminhos fechados são necessários.No entanto, os traços tracejados sempre serão desiguais porque a matriz de trasca está relacionada ao comprimento do caminho, que será deferido para cada caminho.Seria melhor largar o derrame ou ter permanecido a mesma largura, sem traço, para cada caminho.Uma estratégia que eu usei para mostrar o passeios, é reduzir a opacidade no mouseover, depois devolvê-lo a 1.00 no mouse.

Answer 3

Se você usar um <pattern> para os cursos, você pode definir o padrão com base no conjunto do sistema de coordenadas, em vez de com base nas dimensões de qualquer forma.Então o padrão para diferentes formas serão perfeitamente alinhadas.

A desvantagem é que os padrões não se alinham com a direção da linha:o padrão permanecerá a mesma, se a linha é vertical, horizontal ou curva.É como se você tem uma folha de papel de parede estampado o tamanho do gráfico, e são de corte uma tira do mesmo ao longo do contorno da sua forma.O truque, portanto, é descobrir um padrão que parece ser bom, independentemente de como a linha atravessa-lo.

Veja o exemplo: http://fiddle.jshell.net/LYue4/2/

A aparência básica é o resultado de usar a sobreposição de traço-propriedades da matriz.Passe o mouse sobre a imagem e ele irá mudar para um padrão quadriculado;se você segurar o botão do mouse pressionado sobre a imagem, ele irá mudar para uma linha diagonal padrão.

Ambos olham tudo bem, mas não muito, dependendo dos ângulos das linhas de caminho.Você terá que testá-lo em seu mapa, para ver se é um aperfeiçoamento ou não.

Código para os padrões:

<defs>
    <pattern id="checkerboard" patternUnits="userSpaceOnUse" width="2" height="2">
        <rect width="1" height="1"/>
        <rect width="1" height="1" x="1" y="1"/>
    </pattern>
    <pattern id="diagonals" patternUnits="userSpaceOnUse" width="2" height="2">
        <line x1="-1" y1="0" x2="2" y2="3" />
        <line x1="0" y1="-1" x2="3" y2="2" />
    </pattern>
</defs>

CSS:

svg path{
    fill:lightblue;
    stroke: black;
    stroke-dasharray: 2 2;
}
svg:hover path{ 
    stroke: url(#checkerboard);
    stroke-dasharray: none;
}
svg:active path{ 
    stroke: url(#diagonals);
    stroke-dasharray: none;
}
pattern line {
    stroke-width:0.8;
    stroke:black;
}

É claro que você pode brincar com o tamanho do padrão de telha e a espessura das linhas diagonais, mas eu achei que as linhas tinham de ser mais do que o padrão de telha para que eles se sobrepõem sem problemas.