Home > Enterprise >  How to make circle / g / path element in SVG pulse
How to make circle / g / path element in SVG pulse

Time：01-19

I have an SVG of the following map:

enter image description here

On the map, you will notice the orange dots. I'm looking to make these dots pulsate like this:

.pulse {
  margin:100px;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #cca92c;
  box-shadow: 0 0 0 rgba(204,169,44, 0.4);
  animation: pulse 2s infinite;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
    box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
      box-shadow: 0 0 0 10px rgba(204,169,44, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}
<span ></span>

Challenges:

  1. html markup cannot be used within svg's, so using the span as the demo above is not an option.
  2. In order to make sure the dots are still positioned correctly, I've added parent g elements and moved the child transform property onto the parent.

Here is the original (simplified) map:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="37.013" height="41.348" viewBox="0 0 37.013 41.348">
  <defs>
    <filter id="Ellipse_160" x="0.013" y="3.485" width="37" height="37" filterUnits="userSpaceOnUse">
      <feOffset dy="3" input="SourceAlpha"/>
      <feGaussianBlur stdDeviation="3" result="blur"/>
      <feFlood flood-opacity="0.271"/>
      <feComposite operator="in" in2="blur"/>
      <feComposite in="SourceGraphic"/>
    </filter>
  </defs>
  <g id="Group_1132" data-name="Group 1132" transform="translate(-624.987 -1061.515)">
    <g id="Group_973" data-name="Group 973" transform="translate(121.865 791.121)">
      <g id="Group_966" data-name="Group 966" transform="translate(503.497 270.783)">
        <g id="Group_964" data-name="Group 964">
          <path id="Path_110983" data-name="Path 110983" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
          <path id="Path_110984" data-name="Path 110984" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
          <path id="Path_110985" data-name="Path 110985" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
        </g>
        <g id="Group_965" data-name="Group 965">
          <path id="Path_110986" data-name="Path 110986" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
          <path id="Path_110987" data-name="Path 110987" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
          <path id="Path_110988" data-name="Path 110988" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
        </g>
      </g>
    </g>

    <g id="Group_975" data-name="Group 975">
      <g transform="matrix(1, 0, 0, 1, 624.99, 1061.51)" filter="url(#Ellipse_160)">
        <circle id="Ellipse_160-2" data-name="Ellipse 160" cx="9.5" cy="9.5" r="9.5" transform="translate(9.01 9.49)" fill="#ff7c81"/>
      </g>
      <circle id="Ellipse_161" data-name="Ellipse 161" cx="5.5" cy="5.5" r="5.5" transform="translate(638 1075)" fill="#ffee7e"/>
    </g>
    
  </g>
</svg>

Here is my attempt at applying the pulse effect:

.map--pulse {
  margin: 100px;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #cca92c;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
  -webkit-animation: pulse 2s infinite;
  animation: pulse 2s infinite;
}


@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
      box-shadow: 0 0 0 10px rgba(204,169,44, 0);
  }
  100% {
      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}
<div >

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="37.013" height="41.348" viewBox="0 0 37.013 41.348">
  <defs>
    <filter id="Ellipse_160" x="0.013" y="3.485" width="37" height="37" filterUnits="userSpaceOnUse">
      <feOffset dy="3" input="SourceAlpha"/>
      <feGaussianBlur stdDeviation="3" result="blur"/>
      <feFlood flood-opacity="0.271"/>
      <feComposite operator="in" in2="blur"/>
      <feComposite in="SourceGraphic"/>
    </filter>
  </defs>
  <g id="Group_1132" data-name="Group 1132" transform="translate(-624.987 -1061.515)">
    <g id="Group_973" data-name="Group 973" transform="translate(121.865 791.121)">
      <g id="Group_966" data-name="Group 966" transform="translate(503.497 270.783)">
        <g id="Group_964" data-name="Group 964">
          <path id="Path_110983" data-name="Path 110983" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
          <path id="Path_110984" data-name="Path 110984" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
          <path id="Path_110985" data-name="Path 110985" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
        </g>
        <g id="Group_965" data-name="Group 965">
          <path id="Path_110986" data-name="Path 110986" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
          <path id="Path_110987" data-name="Path 110987" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
          <path id="Path_110988" data-name="Path 110988" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
        </g>
      </g>
    </g>

  
    <!-- dot here -->
    <g  id="Group_975" data-name="Group 975">
      <g transform="matrix(1, 0, 0, 1, 624.99, 1061.51)" filter="url(#Ellipse_160)">
        <g transform="translate(9.01 9.49)">
          <circle  id="Ellipse_160-2" data-name="Ellipse 160" cx="9.5" cy="9.5" r="9.5"  fill="#ff7c81"/>
        </g>
    </g>
      
      <circle id="Ellipse_161" data-name="Ellipse 161" cx="5.5" cy="5.5" r="5.5" transform="translate(638 1075)" fill="#ffee7e"/>
    </g>
    
  </g>
</svg>


</div>

As you can see, nothing happens.

I then thought maybe the effect needs to take place on a path rather than circle and tried:

<path id="Ellipse_160-2" data-name="Ellipse 160" cx="9.5" cy="9.5" r="9.5" fill="#ff7c81"/>

Instead of:

<circle id="Ellipse_160-2" data-name="Ellipse 160" cx="9.5" cy="9.5" r="9.5" fill="#ff7c81"/>

But all this did was hide my orange circle.

Is a pulse effect possible here?

CodePudding user response：

In this example I have two separate SVG element (but it could be just one). In the first I define a <symbol> with a shadow and a circle that is animated. The first SVG takes up no space (width and height are 0).

In the second SVG you find the map. I didn't change anything here except the width. By using <use> I can now place the pulsating circle on the map. The nice thing about <use> is that it has it's own viewBox. So, the sizes defined in the symbol will scale according to the size used by the <use> element. Like this:

<use href="#pulse" width="4" height="4" x="21" y="27"/>

This will place the dot (21,27 from the upper left corner) according to the viewBox viewBox="0 0 37.013 41.348".

The two dots I already made are two different sizes -- the size can be adjusted according to the viewBox. The tricky part here is using transform/translate for placing the dot in the right spot. I'm not able to see what all you transform/translate one the <g>'s does. So, here a matter of experimenting.

<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="shadow" filterUnits="userSpaceOnUse">
      <feDropShadow dx="0" dy="0" stdDeviation="0" flood-color="orange">
        <animate attributeName="stdDeviation" values="0;2" dur="2s" repeatCount="indefinite" />
      </feDropShadow>
    </filter>
  </defs>
  <symbol id="pulse" viewBox="0 0 4 4">
    <circle filter="url(#shadow)" cx="2" cy="2" r="1" fill="orange"/>
    <circle  cx="2" cy="2" r="1" fill="orange">
      <animate attributeName="r" values="1;2" dur="2s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="1;0" dur="2s" repeatCount="indefinite" />
    </circle>
  </symbol>
</svg>

<div >

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" viewBox="0 0 37.013 41.348">
  <g id="Group_1132" data-name="Group 1132" transform="translate(-624.987 -1061.515)">
    <g id="Group_973" data-name="Group 973" transform="translate(121.865 791.121)">
      <g id="Group_966" data-name="Group 966" transform="translate(503.497 270.783)">
        <g id="Group_964" data-name="Group 964">
          <path id="Path_110983" data-name="Path 110983" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
          <path id="Path_110984" data-name="Path 110984" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
          <path id="Path_110985" data-name="Path 110985" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
        </g>
        <g id="Group_965" data-name="Group 965">
          <path id="Path_110986" data-name="Path 110986" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
          <path id="Path_110987" data-name="Path 110987" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
          <path id="Path_110988" data-name="Path 110988" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
        </g>
      </g>
    </g>
    </g>
  
  <!-- dot here -->
  <use href="#pulse" width="4" height="4" x="21" y="27"/>
  <use href="#pulse" width="2" height="2" x="12" y="15"/>
</svg>
</div>

Update

To adjust the the "pulsation" you can play around with the attributes value, keyTimes and dur on the animation element. The value is a list of values that the attribute will have over the span of the duration (dur). It will have two or more values. If there are more than two values (like the animation of r in the below example), the keyTimes attribute can be used for setting the the intermediate pace. So here the value will be 0 at 0 seconds, 1 after 1.5 seconds (0.75), and 0 after 2 seconds (1).

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="300">
  <symbol id="pulse" viewBox="0 0 4 4">
    <circle cx="2" cy="2" r="1" fill="orange"/>
    <circle  cx="2" cy="2" r="1" fill="orange">
      <animate attributeName="r" values="1;2;1" keyTimes="0; 0.75; 1" dur="2s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="2s" repeatCount="indefinite" />
    </circle>
  </symbol>
  
  <use href="#pulse" x="0" y="0" width="10" height="10" />
  <use href="#pulse" x="0" y="0" width="1.5" height="1.5" />
</svg>

CodePudding user response：

Maybe so? Using CSS Animation for Map Markers

circle {
  fill: gold;
  opacity: 0.3;
  transform-box: fill-box;
  transform-origin: center;
}
svg > circle:last-child {
  fill: gold;
  opacity: 1;
}
#rp1 {
  animation: ripple1 0.7s linear infinite;
}
@keyframes ripple1 {
  0% {
    transform: scale(2);
    opacity: 0.3;
  }
  100% {
    transform: scale(2.5);
    opacity: 0.0;
  }
}
#rp2 {
  animation: ripple2 0.7s linear infinite;
}
@keyframes ripple2 {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(2);
  }
}
#rp3 {
  animation: ripple3 0.7s linear infinite;
}
@keyframes ripple3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}
#rp4 {
  animation: ripple4 0.7s linear infinite;
}
@keyframes ripple4 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.5);
  }
}
<div >

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="370" height="410" viewBox="0 0 37.013 41.348"> 
<defs>
  <g id="Group_975" >
    <circle id="rp1" cx="20" cy="20" r="1" />
    <circle id="rp2" cx="20" cy="20" r="1" />
    <circle id="rp3" cx="20" cy="20" r="1" />
    <circle id="rp4" cx="20" cy="20" r="1" />
  </g>
</defs>
 
  <g id="Group_1132" data-name="Group 1132" transform="translate(-624.987 -1061.515)">
    <g id="Group_973" data-name="Group 973" transform="translate(121.865 791.121)">
      <g id="Group_966" data-name="Group 966" transform="translate(503.497 270.783)">
        <g id="Group_964" data-name="Group 964">
          <path id="Path_110983" data-name="Path 110983" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
          <path id="Path_110984" data-name="Path 110984" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
          <path id="Path_110985" data-name="Path 110985" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
        </g>
        <g id="Group_965" data-name="Group 965">
          <path id="Path_110986" data-name="Path 110986" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
          <path id="Path_110987" data-name="Path 110987" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
          <path id="Path_110988" data-name="Path 110988" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
        </g>
      </g>
    </g>
     
  </g>
   <!-- dot here -->
     <use xlink:href="#Group_975" x="1" y="3"/>
       <circle r="1" cx="21" cy="23" /> 
</svg>
</div>

Option using a map in *.png format

The map image is added using the <image> tag

This will allow you to place markers on top of the map and link them to certain places on the map. The relative position of markers and places on the map will remain the same regardless of zooming and using any gadget.

enter image description here

.container {
width:100vw;
height:100vh;
}
circle {
  fill: gold;
  opacity: 1;
  
  transform-box: fill-box;
  transform-origin: center;
}

#anim-circle {
  fill: crimson;
  opacity: 0.3;
  animation: ripple1 2s linear infinite;
}


@keyframes ripple1 {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0.0;
  }
}
<div >
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 2200 1200" >  

<image xlink:href="https://i.stack.imgur.com/cosLH.png" width="100%" height="100%" /> 
 <!-- dot here -->
 <defs>
 <g id="Group_975">
   <circle id="anim-circle" cx="250" cy="250" r="15"></circle>
  <circle cx="250" cy="250" r="15"></circle>
 </g>
 </defs>   
   <use xlink:href="#Group_975"  /> 
     <use xlink:href="#Group_975" x="160" y="300" />
      <use xlink:href="#Group_975" x="750" y="200" /> 
        <use xlink:href="#Group_975" x="1435" y="650" />

</svg>  
</div>

Page link：https//www.codepudding.com/Enterprise/267610.html

Prev:What is in the xmlns:serif namespace, and why is it needed (or not) in SVG?
Next:In numpy, how to efficiently build a mapping from each unique value to its indices, without using a
  •  Tags：  
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding