SVG の隣接するパス上の破線/点線のストロークの重複

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

質問

国境を接する複数の郡の地図を作成しています。各郡は独自の囲まれた道であるため、隣接する郡の境界は互いに重なっています。

各郡に破線を付けたいと思います。ただし、適用すると、各郡の破線の境界が重なり、不均一なダッシュの外観が作成されるため、交差する境界が見苦しくなります。

ユーザーは郡の境界内のエリアにマウスを移動して郡を選択することになるため、郡ごとに囲まれたパスを作成する必要があると考えられます。

解決策は？

他のヒント

はい、囲まれたパスが必要です。ただし、ダッシュアレイがパス長に関連しているため、破線のストロークは常に不均一になります。これは各パスに対して不因々です。各パスに対して、ストロークをドロップするか、それがダッシュなしで同じ幅のままであることが最善です。マウスオーバーを表示するために使用した戦略は、マウスオーバーの不透明度を減らすことですから、マウスアウトで1.00に戻ります。

を使用する場合は、 <pattern> ストロークの場合、1 つの形状の寸法に基づくのではなく、全体の座標系に基づいてパターンを定義できます。そのため、さまざまな形のパターンが完全に揃います。

欠点は、パターンが線の方向に沿って整列しないことです。線が垂直、水平、または曲線であっても、パターンは同じままです。それは、グラフィックのサイズと同じパターンの壁紙のシートがあり、それを形状の輪郭に沿って切り取るようなものです。したがって、線がどのように横切るかに関係なく、見栄えの良いパターンを見つけ出すことが重要です。

例を参照してください: 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