SVG警报器CSS动画

Question

我试图在SVG动画中复制这个警报器。

这是我创造的：

＆＃13;

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 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>

Answer 2

一个破折号数组，其中一个值与您的一样

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>