Question

我试图找到一种方法来绘制像HERE这样的动画虚线。

使用此解决方案

问题是在虚线白线下方绘制黑线。问题是，我想让中间部分（破折号之间的空格）透明，将这个动画放在地图图像的顶部，而不是用颜色填充（在本例中像白色）。

我尝试使用stroke-dasharray和stroke-dashoffset属性的不同设置，但所有这些结果都不像我搜索的方式。

目前我将svg对象直接嵌入到我的HTML文档中。 svg标记包含路径标记，建议用于路径本身。我尝试用简单的css动画关键帧实现动画，如：

    @keyframes dash
    {
        from
        {
            stroke-dashoffset: 1000;
        }
        to
        {
            stroke-dashoffset: 0;
        }
    }

Answer 1

短划线之间的空格默认是透明的。你有什么改变颜色的吗？

svg {
  background-image: linear-gradient(45deg, red, blue);
}
svg circle {
  fill: pinK;
  stroke: rgba(0, 0, 0, 0.9);
  stroke-width: 10px;
  stroke-dasharray: 5;
  stroke-dashoffset: 0;
  animation: test 10s;
  -webkit-animation: test 10s;
}
@keyframes test {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 200;
  }
}
@-webkit-keyframes test {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 200;
  }
}

<svg width="200" height="200" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" />
</svg>

使用SVG的动画虚线

1 个答案: