SVG의 인접한 경로에 겹치는 점선 / 점선

StackOverflow https://stackoverflow.com//questions/22045679

문제

테두리를 공유하는 몇 가지 카운티의지도를 구축하고 있습니다.각 카운티는 자체 동봉 된 경로이므로 인접한 카운티의 테두리가 서로 쌓여 있습니다.

각 카운티를 파선 뇌졸중으로주고 싶습니다.그러나 적용될 때 교차하는 테두리는 각 카운티의 점선 테두리로서 추악 해지고 고르지 않은 대시 모양을 만듭니다.

내 사용자는 카운티 테두리 내의 영역을 마우스 링하여 카운티를 선택하여 각 카운티에 대해 동봉 된 경로를 만드는 데 필요합니다.

솔루션

도움이 되었습니까?

해결책 3

나는 제안과 다른 것과 다르게 이것을 해결할 수있게되었다.나는 다른, 더 많은 것을 게시했습니다특정 질문 여기 .(내 대답 참조)

다른 질문에 설명 된 단계를 완료하면 ShapeFile을 Geojson으로 되돌리고 내지도에로드했습니다.나는 전체 다각형을 포함하는 Geojson을 제거하지 않았지만 단순히 해당 레이어의 테두리 스타일을 해제합니다.그런 다음 Dissolved Geojson과 동일한 레이어 스타일링을 적용했으며 이번에는 파선 뇌졸중으로

결과의 이미지가 여기에 있습니다.

다른 팁

예, 동봉 된 경로가 필요합니다.그러나 대시 배열이 경로 길이와 관련되어 있기 때문에 파선은 항상 고르지 않습니다.이 경로에 대해 삭제됩니다.뇌졸중을 떨어 뜨리거나 각 경로에 대해 대시없이 동일한 너비로 남아있게하는 것이 가장 좋습니다.마우스 오버를 보여주기 위해 사용한 전략은 마우스 오버에서 불투명도를 줄이는 다음 마우스 오른쪽으로 1.00으로 되돌아갑니다.

<pattern> 정의 할 수 있습니다. 모든 형상의 치수를 기반으로하는 대신 전체 좌표계를 기반으로 한 패턴입니다. 따라서 다른 모양의 패턴이 완벽하게 줄 것입니다.

단점은 패턴이 선의 방향과 정렬되지 않는다는 것입니다. 패턴은 선이 수직, 수평 또는 곡선인지 여부와 동일한 여부와 동일할지 여부와 동일합니다. 그것은 마치 당신이 당신의 그래픽의 크기의 무늬 벽지의 크기가있는 것처럼, 당신의 모양의 윤곽을 따라 스트립을 자르고 있습니다. 그러므로 그 트릭은 라인이 어떻게 그것을 가로 질러 삭감하는지에 관계없이 좋은 것처럼 보이는 패턴을 파악하는 것입니다.

예제 : http://fiddle.jshell.net/lyue4/2/

기본 모양은 겹치는 대시 배열 속성을 사용한 결과입니다. 이미지에 마우스를 올리면 바둑판 패턴으로 전환됩니다. 마우스를 이미지에 고정하면 대각선 패턴으로 전환됩니다.

둘 다 경로 선의 각도에 따라 괜찮지 만 훌륭하지는 않습니다. 지도에서 테스트해야합니다. 개선인지 확인해야합니다.

패턴 코드 코드 : 

<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;
}
.

패턴 타일의 크기와 대각선의 두께를 사용하여 플레이 할 수 있지만, 라인이 패턴 타일보다 더 길어야한다는 것을 발견했습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top