تداخل الحدود المتقطعة / المنقطة على المسارات المجاورة في SVG

Question

أقوم بإنشاء خريطة للعديد من المقاطعات التي تشترك في الحدود.كل مقاطعة لها مسار مغلق خاص بها، وبالتالي فإن حدود المقاطعات المتجاورة متراكبة فوق بعضها البعض.

أود أن أعطي كل مقاطعة ضربة متقطعة.ومع ذلك، عند تطبيقها، تبدو الحدود المتقاطعة قبيحة حيث تتداخل الحدود المتقطعة لكل مقاطعة، مما يؤدي إلى ظهور شرطة غير متساوية.

سيقوم المستخدمون باختيار المقاطعات عن طريق تمرير الماوس فوق المنطقة داخل حدود المقاطعة، مما يجعل (على ما أعتقد) من الضروري إنشاء مسار مغلق لكل مقاطعة.

حلول؟

Answer 1

انتهى بي الأمر في حل هذا بشكل مختلف عن أي من الاقتراحات.نشرت آخر، أكثرسؤال محدد هنا .(انظر جوابي)

بمجرد الانتهاء من الخطوات التي أوضحت في السؤال الآخر، قمت بتحويل الشكل إلى Geojson وتحميلها في خريطتي.لم أزيل Geojson التي تضمنت المضلعات بأكملها، لكن ببساطة إيقاف تشغيل نمط الحدود في تلك الطبقة.ثم طبقت نفس طبقات الطبقة إلى Geojson المذابة، وهذه المرة مع ضربة طقطعة.

صورة النتيجة هنا.

Answer 2

نعم، المسارات المغلقة مطلوبة.ومع ذلك، ستكون السكتات الدماغية المتنقلة غير متكافئة دائما لأن مجموعة اندفاعة مرتبطة بطول المسار، والتي ستكون defferent لكل مسار.سيكون من الأفضل إما إسقاط السكتة الدماغية أو أن تبقى نفس العرض، دون اندفاعة، لكل مسار.الاستراتيجية التي استخدمتها لإظهار الماوس فوقها، هي تقليل التعتيم على Mouseover، ثم أعدها إلى 1.00 على الماوس خارج.

Answer 3

إذا كنت تستخدم أ <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;
}

يمكنك بالطبع التلاعب بحجم بلاط النمط وسمك الخطوط القطرية، لكنني وجدت أن الخطوط يجب أن تكون أطول من بلاط النمط حتى تتداخل بسلاسة.