如何使用SVG操纵间距

Question

我正在用SVG绘制巴西国家/地区的地图，并对style存有疑问。 Here是地图片段。我想像下面的示例图片一样在各州之间留出一段距离：

我该怎么做？

Answer 1

要添加状态之间的间隔，请使用stroke-width：

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

要保留也使用stroke-width的动画线条画，请使用animation而不是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%;
     }
}

我用您的CodePen here做了一个工作叉。

P.S。您有错字--default-strok => --default-stroke;）