У меня есть штаты и территории, представленные на этой карте, есть линии штатов, а затем линии территорий, и когда я заполняю строки штатов цветом, создается впечатление, что определенные участки карты (все в пределах самого штата) невозьмите цвет заливки, но лучше сохраните исходный цвет заливки территории.Таким образом, кажется, что заполнение территории для этих конкретных областей переопределяет заполнение строки состояния.
Больше нет объектов ломаной линии или многоугольника, я преобразовал их и превратил в пути.
У меня есть следующий CSS:
.territories
{
isolation:isolate;
}
.at
{
fill:#bcd98d;
stroke:#80bc58;
stroke-linecap:round;
stroke-linejoin:round;
}
.at.contested {
}
.states
{
mix-blend-mode:color-burn;
}
.state-line
{
fill:blue;
stroke:black;
stroke-width:1.2px;
stroke-linecap:round;
stroke-linejoin:round;
}
#striped
{
mask: url(#mask-stripe);
fill:red;
}
Изображение доступно здесь:
Я был бы готовподелиться SVG с людьми, которые отправят мне в личку
Вот код из SVG для Орегона и Миссури:
<g id="Oregon">
<g id="area_98" data-name="area_98">
<path class="at" d="M231.83,113.17l-3.33-2.67-2-5-6.5-.83-17-4.5L193.17,98l-6,1.17-3.34-1.34-2.66,1.67-4.5-.83-2.84,1.66L168,99.67,166,97l-5.5,1.67.33,2.83,1.34.83-.84,2.67,2.5,1.83L162.5,109l2,2-.83,3.33L175,117l-1.83,2.67,2.83,3.66-2.5,6.5-4.67,15-1.5-.66-1.83,5.33,2,1.67-1,2.33,3.17,1.83-8.17,5.17-1.5,1.17L159,166l-2.83.83L154,164.17l-1.33,1.16-.09-.85-1.22.63c-.06.89-.11,2.14-.11,2.14l-4,3.13,2.5,4.62-1.37,5.5-1.25,1.5,1.12,1.88-.37,1.25-2-.25-.67,3.34,15,3.62,2.48.49,0,.1,39,9.42.22,0,.94-3.56L211.67,162l3.5-7.67.16-3.5,1.67-1-4.17-4.16-.16-3.34,4.5-6,4.5-2.33,1.16-5.17,2.5-2.16,5.17-8.5,2.17-1.17Z" transform="translate(-64.75 -11.33)"/>
<path class="at" d="M151.46,164.26s0,0,0,0S151.47,164.22,151.46,164.26Z" transform="translate(-64.75 -11.33)"/>
</g>
<g id="area_132" data-name="area_132">
<path class="at" d="M145.88,184.88l2,.25.37-1.25L147.13,182l1.25-1.5,1.37-5.5-2.5-4.62,4-3.13s.1-2.69.21-3c-.34-.22-3-3.26-3-3.26l-3.23,1.15-2,.73-2.62-3.38-1.25,1-3.13-1.5-.25-2-7.25-1-6,7.25-3.62-6.37.87-2-1.37-5-8.75-1.5-1.38,1.75s-4.87,2.12-5.25,2.25-2.12-1.88-2.12-1.88l1.12-1.62-.37-2.13-4.5-.5s-3.75,3.13-4,3.5-2.5-2.37-2.5-2.37l-4,.62-.38-.87-2.12-1.38-2.88,1.38.38,3.25,1.5,3.12-4.25,6,.62,3.75-1.12,1.25,1.75,4.25L136.9,186.1l8.23,2.53Z" transform="translate(-64.75 -11.33)"/>
</g>
<g id="area_73" data-name="area_73">
<path class="at" d="M86.5,147.13l.38.87,4-.62s2.25,2.75,2.5,2.37,4-3.5,4-3.5l4.5.5.37,2.13-1.12,1.62s1.75,2,2.12,1.88,5.25-2.25,5.25-2.25l1.38-1.75,8.75,1.5,1.25,4.58,4.12-1,2.83-2.83-1.33-7.5,5.17-4.17.33-3,2.92-3.2c-1.84-1.25-7.54-4.67-7.54-4.67l1.75-1.38L127,125.5l.25-2.25-3-2.87-1.37-2.13-2.25,1.5-1.63-2.5L118,119l-2.12-2.5-1.75,2.13-2.75-4.5-1.75,1.62-4-2.12-3.25,1.75-2.12-1.06-.59,1.18-8,18.5-4.84,4.17-3.13,7.9.68-.32Z" transform="translate(-64.75 -11.33)"/>
</g>
<g id="area_20" data-name="area_20">
<path class="at" d="M119.13,156.88l3.62,6.37,6-7.25,7.25,1,.25,2,3.13,1.5,1.25-1,2.62,3.38,2-.73L148.5,161s2.62,3,3,3.26c0,0,0,0,0,0s0,0,0,0a5.82,5.82,0,0,0-.1.85l1.22-.63.09.85,1.33-1.16,2.17,2.66L159,166l1-4.33,1.5-1.17,8.17-5.17-3.17-1.83,1-2.33-2-1.67,1.83-5.33,1.5.66,4.67-15,2.5-6.5-2.83-3.66L175,117l-11.33-2.67.13-.54-1.13.88.33,6-22.34-6-1,1.53.5,2.25-2.88,4.25-1,7.5a31.87,31.87,0,0,1-1.75,3,2.66,2.66,0,0,0-.58-.45L131,136l-.33,3-5.17,4.17,1.33,7.5L124,153.5l-4.12,1,.12.42Z" transform="translate(-64.75 -11.33)"/>
</g>
<g id="area_185" data-name="area_185">
<path class="at" d="M107.75,97.38l-.75,3-2.12,1.75-5,12,2.5,1.25,3.25-1.75,4,2.12,1.75-1.62,2.75,4.5,1.75-2.13L118,119l1-1.75,1.63,2.5,2.25-1.5,1.37,2.13,3,2.87L127,125.5l1.13,1.25-1.75,1.38s8.12,4.87,8.12,5.12a31.87,31.87,0,0,0,1.75-3l1-7.5,2.88-4.25-.5-2.25,2.37-3.5-11.5-2.5-1.62-4.5-1.25-2.12,1.5-4.63-4-1.12-1.38,1.75.25,2-1.75,1.12-1.5-1.37-1.87,1.75-1-1.38-2.13,1.5-2-2L113,102l-2-.62.75-1.75L110.5,97.5l-1.25,1.25Z" transform="translate(-64.75 -11.33)"/>
</g>
<g id="area_172" data-name="area_172">
<path class="at" d="M45.75 86.17 47 88.29 46.25 90.04 48.25 90.67 49 89.92 51 91.92 53.13 90.42 54.13 91.79 56 90.04 57.5 91.42 59.25 90.29 59 88.29 60.38 86.54 64.38 87.67 62.88 92.29 64.13 94.42 65.75 98.92 77.25 101.42 74.88 104.92 75.91 103.39 98.25 109.33 97.92 103.33 99.05 102.45 99.75 99.67 97.75 97.67 99.08 95.5 96.58 93.67 97.42 91 96.08 90.17 95.8 87.76 93.92 86.33 91.75 86.83 89.25 83.92 81.88 82.04 73.5 83.92 66.75 78.79 67.75 75.29 67.88 70.92 66.75 66.54 64.13 64.79 62.13 65.42 60.25 63.79 61.5 62.17 57.25 59.79 52 58.42 52.44 56.79 52.08 56.67 51.58 63.33 49.58 66.83 49.42 69.17 47.92 71 47.75 74.67 45.92 79.33 44.25 85.67 43.73 86.71 44.5 87.42 45.75 86.17z"/>
</g>
</g>
<g id="Missouri">
<g id="area_208" data-name="area_208">
<path class="at" d="M724.37,366.67,720.25,363l.25-.42.23-.91.16-1.11.11-1.09v-3.24l-2.29-1.73L717,356.67l-.5,0L713,350l1-2.25-2.25-4.25,2-2.25-3.5-1.75-15.5-9-1.25-4,1-5.75,2.5-2.5L695.75,315l1.25-2-2-2.25-3.5-.25-1.75,2-2.25-.25-2.25-5.75-1.7-4.62,0-.13-.1-.08-3.65-3.17L675,295.75,673.25,294l-2,.23-2.26.27v3.75l-3.75.5-1.5-3.25-6.25-.5-2.75,1.5-.25,2.5-3.75,1,.25,2.25v3.25l2.25,1.5.5,3.5a22.59,22.59,0,0,1-1.25,4c-.5.75,1,3,1,3l-1.25,2.25.5,3.75,2.75.75-1.75,2.25-.5,3-2.25-.25,1.25,2.75s1,1.75,1.75,2.75a2.26,2.26,0,0,1,.2,2l2,.78.5,2.25L656,343.5l2.5,4.25.75,6.25,2.25-2.75.75-5.5,5.25-.25,1,5.75,1.75-1.25.25,19.5-2.25.75-.73,1.71,1.45,1h.21L701,370.5l2.5,3-.5,2-1.25,3.25-3.5,2.5.25,2.5,4.3-.5,8.48-1,.22,0s1.5-2.25,1.5-3a17.08,17.08,0,0,0-1-3.25s2.25.25,2-.5-.75-3.5-.25-4.25a12.73,12.73,0,0,0,1-2.75h7.75l1.37-.08Z" transform="translate(-64.75 -11.33)"/>
</g>
<g id="area_204" data-name="area_204">
<path class="at" d="M670.25,350l-1.75,1.25-1-5.75-5.25.25-.75,5.5L659.25,354l-.75-6.25L656,343.5l.75-3.75-.5-2.25-2-.78a3,3,0,0,1-.2.53L651,340s-3.69-.13-6.26-.29c-1-.07-1.88-.14-2.24-.21-1.25-.25-4,.75-4,.75l-1.75-3.75v5l-2.25,1.25L633,339.5l-4,.25-2.5.75-5.25-.5-3.33-.32L616,339.5l-3.77,2.44-.73,1.31.08,1.74.27,6.12.15,3.39.28,5.13.24,4.35.23,4.27-.25,7,1.49,0,3.88-.11,3.88-.1,20.59-.25h.16c.75,0,19-.75,19-.75l5.25-.25.77-1.79.73-1.71,2.25-.75Z" transform="translate(-64.75 -11.33)"/>
</g>
<g id="area_110" data-name="area_110">
<path class="at" d="M652.25,332,651,329.25l2.25.25.5-3,1.75-2.25-2.75-.75-.5-3.75,1.25-2.25s-1.5-2.25-1-3a22.59,22.59,0,0,0,1.25-4l-.5-3.5L651,305.5v-3.25l-.25-2.25,3.75-1,.25-2.5-3.25.75-1.76-.14-1.49-.11-.5-2.5-2.5,2.25-.75-1.5s-3,1.75-3.75,2-2.75,1.5-3.5,1.75-1.75-3.25-1.75-3.25l-.75,1.5h-4l.75-1.75-6.25-3s-1,1.25-1.5,2-2.75-1.75-2.75-1.75a32.53,32.53,0,0,1-1.25,3.5c-.5,1-2.5,1.25-2.5,1.25l-2.25-3a21.23,21.23,0,0,0-.75,2.25c-.25,1-2.75-1-2.75-1l-1.5,2L608.75,300l-2.5-1-1.42,1.17-1.5,1.33-1-.21,2.46,3,1.25,2.5,3.25,2,2,.75.75,9,.25,12,.5,2.5-2,3,1,6.25.48-.31L616,339.5l1.92.18,3.33.32,5.25.5,2.5-.75,4-.25,1.5,3.25,2.25-1.25v-5l1.75,3.75s2.75-1,4-.75c.36.07,1.21.14,2.24.21,2.57.16,6.26.29,6.26.29l3-2.75a3,3,0,0,0,.2-.53,2.26,2.26,0,0,0-.2-2C653.25,333.75,652.25,332,652.25,332Z" transform="translate(-64.75 -11.33)"/>
</g>
<g id="area_207" data-name="area_207">
<path class="at" d="M670.75,289l-1-3-.75-4.25.2-.75.11-.47.24-.85.7-2.68-.16-.17-.87-.89-1.59-1.75-1.41-1.47-.91-.69-1.84-1.28-3.31.44-1.38.19-1.56.15-2.46.28-8.76.94L627.75,274,595,275.07l-5.53.18.5,4.25,2.5,2.5.84,1.31,1.41,2.19,1.25,3,.72.55,2.53,1.95,1.75,1.75,2.75-1.5.75,3.5-2,2L600.75,300l1.4,1.25,1.14.25.92-.83.71-.59,1.33-1.08,2.5,1,1.25-2.25,1.5-2s2.5,2,2.75,1a21.23,21.23,0,0,1,.75-2.25l2.25,3s2-.25,2.5-1.25a32.53,32.53,0,0,0,1.25-3.5s2.25,2.5,2.75,1.75,1.5-2,1.5-2l6.25,3-.75,1.75h4l.75-1.5s1,3.5,1.75,3.25,2.75-1.5,3.5-1.75,3.75-2,3.75-2l.75,1.5,2.5-2.25.5,2.5,1.49.11,1.76.14,3.25-.75,2.75-1.5,6.25.5,1.5,3.25,3.75-.5V294.5l2.26-.27,2-.23Z" transform="translate(-64.75 -11.33)"/>
</g>
</g>