Help to create pulse animation on a SVG world map, demo inside.

[mvaneijgen]

I have this SVG world map where a random dot lights up every few seconds: http://codepen.io/mvaneijgen/pen/NRzENO

And I want it to look something like this http://codepen.io/mvaneijgen/pen/NRLdoZ but here a random dot is drawn an sometimes lands in the ocean, which is not preferable.

What i have tried:
• transform: scale(); can’t get it to work
• :after elements are not working on SVG elements
• box-shadow not working on SVG elements

[Paulie_D]

SVG sub elements / fragments can’t have pseudo-elements or CSS box-shadows.

Transforms should work though.

The rest is a JS issue.

[Paulie_D]

What you could do, certainly in Chrome, is change the radius of the circle (border-radius does not work on circle elements) using the r property

@keyframes pulse {
  to {
    r: 5;
  }
}

http://codepen.io/Paulie-D/pen/vXzjmA

[mvaneijgen]

Hey @Paulie_D r seems to work in Chrome, but not in Safari do you have a caniuse.com for what r is and what is supported, I can’t seem to find it and I never saw a one character css property.

[Paulie_D]

As I said, it’s probably Chrome / Blink only…but it’s an SVG2 presentation attribute which some browsers haven’t caught up with…Safari tend to lag behind quite often in newer properties.

https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes

However, you could always manipulate (and animate) that property in the JS instead of the CSS.

http://stackoverflow.com/questions/14255631/style-svg-circle-with-css

[mvaneijgen]

Damn transfrom: scale(3) does work, but in my text I forgot to set the transfrom-origin: center; Now the only think is z-index which is over ruled by the way svg works

http://codepen.io/mvaneijgen/pen/PGdaVG

[Author]

Posts