1

我正在尝试在 SVG 动画中复制此警报器。

在此处输入图像描述

这是我创建的：

svg {
  height: 200px;
}

#siren {
  animation: flash 1s linear infinite;
}

#line1, #line2, #line3 {
  stroke-dasharray: 10;
  animation: line-dash 1s forwards infinite;
}

@keyframes line-dash {
  0% {
    stroke-dashoffset: 46;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes flash {
	to {
    fill: white;
  }
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.69 98.48">
  <title>siren</title>
  <g id="_32b192a6-4f40-44d1-9e98-565e0c30a65b" data-name="32b192a6-4f40-44d1-9e98-565e0c30a65b">
    <g id="ef66adc2-a9a5-4b4a-830b-37ffb06635fc">
      <path id="siren" d="M342.14,70.62h2.42a16,16,0,0,1,16,16V104H326.14V86.62A16,16,0,0,1,342.14,70.62Z" transform="translate(-290.79 -11.71)" fill="#f15d44" stroke="#42404d" stroke-miterlimit="10" stroke-width="2"/>
      <rect x="25.67" y="88.75" width="53.78" height="9.73" fill="#f1f2f2"/>
    </g>
  </g>
  <line id="line2" x1="52.56" y1="46.6" x2="52.56" fill="none" stroke="#ffdb55" stroke-miterlimit="10" stroke-width="10"/>
  <line id="line3" x1="68.2" y1="51.13" x2="101.15" y2="18.19" fill="none" stroke="#ffdb55" stroke-miterlimit="10" stroke-width="10"/>
  <line id="line1" x1="36.48" y1="52.32" x2="3.54" y2="19.37" fill="none" stroke="#ffdb55" stroke-miterlimit="10" stroke-width="10"/>
</svg>

4

2 回答 2

1

我想你想要这样：

svg {
  height: 200px;
}

#siren {
  animation: color-flash 1s linear infinite;
}

#line1, #line2, #line3 {
  stroke-dasharray: 10;
  animation: line-dash 1s forwards infinite;
}

@keyframes line-dash {
  0% {
    stroke-dashoffset: 46;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes flash {
	to {
    fill: white;
  }
}
@keyframes color-flash {
  0% {
    fill: white;
  }
  50% {
    fill: red;
  }
  100% {
    fill: yellow;
  }
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.69 98.48">
  <title>siren</title>
  <g id="_32b192a6-4f40-44d1-9e98-565e0c30a65b" data-name="32b192a6-4f40-44d1-9e98-565e0c30a65b">
    <g id="ef66adc2-a9a5-4b4a-830b-37ffb06635fc">
      <path id="siren" d="M342.14,70.62h2.42a16,16,0,0,1,16,16V104H326.14V86.62A16,16,0,0,1,342.14,70.62Z" transform="translate(-290.79 -11.71)" fill="#f15d44" stroke="#42404d" stroke-miterlimit="10" stroke-width="2"/>
      <rect x="25.67" y="88.75" width="53.78" height="9.73" fill="#f1f2f2"/>
    </g>
  </g>
  <line id="line2" x1="52.56" y1="46.6" x2="52.56" fill="none" stroke="#ffdb55" stroke-miterlimit="10" stroke-width="10"/>
  <line id="line3" x1="68.2" y1="51.13" x2="101.15" y2="18.19" fill="none" stroke="#ffdb55" stroke-miterlimit="10" stroke-width="10"/>
  <line id="line1" x1="36.48" y1="52.32" x2="3.54" y2="19.37" fill="none" stroke="#ffdb55" stroke-miterlimit="10" stroke-width="10"/>
</svg>

于 2017-11-03T04:43:57.147 回答
1

一个像你一样有一个值的破折号数组

stroke-dasharray: 10;

实际上是一个快捷方式：

stroke-dasharray: 10 10;

这意味着虚线图案由长度为 10 的虚线和长度为 10 的间隙组成。然后它重复虚线 10、间隙 10、虚线 10、间隙 10 等。

如果你想要一个短破折号，然后是一个大的差距，你需要在破折号模式中添加一个适当的差距值。例如：

stroke-dasharray: 10 40;


svg {
  height: 200px;
}

#siren {
  animation: flash 1s linear infinite;
}

#line1, #line2, #line3 {
  stroke-dasharray: 10 40;
  animation: line-dash 1s forwards infinite;
}

@keyframes line-dash {
  0% {
    stroke-dashoffset: 46;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes flash {
  to {
    fill: white;
  }
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.69 98.48">
  <title>siren</title>
  <g id="_32b192a6-4f40-44d1-9e98-565e0c30a65b" data-name="32b192a6-4f40-44d1-9e98-565e0c30a65b">
    <g id="ef66adc2-a9a5-4b4a-830b-37ffb06635fc">
      <path id="siren" d="M342.14,70.62h2.42a16,16,0,0,1,16,16V104H326.14V86.62A16,16,0,0,1,342.14,70.62Z" transform="translate(-290.79 -11.71)" fill="#f15d44" stroke="#42404d" stroke-miterlimit="10" stroke-width="2"/>
      <rect x="25.67" y="88.75" width="53.78" height="9.73" fill="#f1f2f2"/>
    </g>
  </g>
  <line id="line2" x1="52.56" y1="46.6" x2="52.56" fill="none" stroke="#ffdb55" stroke-miterlimit="10" stroke-width="10"/>
  <line id="line3" x1="68.2" y1="51.13" x2="101.15" y2="18.19" fill="none" stroke="#ffdb55" stroke-miterlimit="10" stroke-width="10"/>
  <line id="line1" x1="36.48" y1="52.32" x2="3.54" y2="19.37" fill="none" stroke="#ffdb55" stroke-miterlimit="10" stroke-width="10"/>
</svg>

于 2017-11-03T05:23:24.567 回答