CODEWITHSUNDEEP
htmlcsssvg
SHRIMP
SHRIMP

Reputation: 147

How to manipulate spacing with SVG

I am making a map of Brazil country with SVG and I have a doubt of style. Here is the map snippet. I'd like to put a spacing between States like the example image below:

enter image description here

How can I do this?

Upvotes: 1

Views: 104

Answers (1)

Xander
Xander

Reputation: 1696

To add the spacing between states, use stroke-width:

.mapa-svg-estados {
    stroke: var(--default-strok);
    stroke-width:3px;
}

To keep the animated line drawing, which also uses stroke-width, use animation rather than transition:

.mapa-svg-estados-active {
    cursor: pointer;
    stroke: var(--default-blue-stroke);
    stroke-dasharray: 180%;
    stroke-dashoffset: -120%;
    fill: var(--default-grey-black-fill);
    animation:outline 0.8s ease forwards;
}
@keyframes outline {
     from {}
     to {
          stroke-dashoffset: 0%;
     }
}

I made a working fork from your CodePen here.

P.S. you have a typo --default-strok => --default-stroke ;)

Upvotes: 2

Related Questions