I have the following SVG code for an exported asset from a Sketch file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="116px" height="117px" viewBox="0 0 116 117" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="loader_circles">
<!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
<title>Group 2</title>
<desc>Created with Sketch.</desc>
<defs>
<circle id="path-1" cx="58.5" cy="58.5" r="58.5"></circle>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="117" height="117" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<circle id="path-3" cx="59" cy="59" r="36"></circle>
<mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="72" height="72" fill="white">
<use xlink:href="#path-3"></use>
</mask>
</defs>
<g id="Common-elements" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="78,34">
<g id="Group-2" stroke="#4A90E2" stroke-width="14">
<use id="Oval-8" mask="url(#mask-2)" xlink:href="#path-1"></use>
<use id="Oval-8" mask="url(#mask-4)" xlink:href="#path-3"></use>
</g>
</g>
</svg>
It is a loading spinner with two circles one inside of another, now my aim is to use CSS3 Keyframe animation to animate the two circles, mainly rotate it using transform property.
I am not an expert with SVG so I searched for ways to animate SVG with CSS and found that it is simply animating the elements inside of the SVG code for a particular path.
So I did this
#path-1 {
transform-origin: center;
animation: rotateClockwise 0.6s infinite linear;
}
#path-3 {
transform-origin: center;
animation: rotateAntiClockwise 0.6s infinite linear;
}
#keyframes rotateClockwise {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes rotateAntiClockwise {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
The animation works, the two circles spins as it should but somehow the circles just gets malformed, the strokes of the circles just gets paler and thicker. The spinner looks like this when I don't do the transformation, I think the issue is mainly with the transform property
Here's a live demo:
http://jsbin.com/zipecefune
I am not sure why its happening, any ideas?
I'm not sure what is the source of the problem, but it seems wrong to animate something within defs as these are references, from MDN:
SVG allows graphical objects to be defined for later reuse. It is
recommended that, wherever possible, referenced elements be defined
inside of a <defs> element. Objects created inside a <defs> element
are not rendered immediately; instead, think of them as templates or
macros created for future use.
If instead of animating your circle elements you animate use, the problem is fixed (you need to rename the id property because they must be unique.
http://jsbin.com/qonokufimo/edit?html,css,js,output
Related
Background
I’m loving the expanded CSS support in SVG2. It’s great not having to rewrite attributes over and over. So I’ve been converting some code in a project from SVG attributes to CSS. Most of this has worked just fine.
When it comes to transforms, things can seem tricky if you are comfy with how CSS transforms work in HTML. (This is especially true for rotate() transformations, which is the focus of this question.) That’s because SVG doesn’t have the “automatic flow” that HTML does.
In other words, when you have a bunch of HTML elements, one after another, they will automatically lay themselves out according to the box model.
There is no such “automatic” or “default” layout in SVG. As a result, SVG transforms default to being calculated from the origin. (That’s 0,0 in user coordinates).
The Almost-Perfect Solution
For most elements, there’s a simple solution: the awesome CSS property transform-box. In most cases, using the following CSS will allow you to transform SVG elements in pretty much the same way as HTML elements:
/* whatever elements you want to transform */
rect, polygon {
transform-box: fill-box;
transform-origin: center center; /* or `top left`, `center right`, etc. */
}
.rotate90 {
transform: rotate(90deg);
}
Now, you can just do something like...
<rect class="rotate90" x="123" y="789" width="50" height="50" />
And it will rotate around the transform-origin specified in the CSS. Since the above example used a transform-origin of center center, it rotates in place.
That matches the behavior of HTML elements using transform: rotate(…). And—especially if there’s a lot of rotations like this in an SVG image—it is way, way better than the equivalent SVG markup.
Why is CSS better than the SVG markup equivalent?
Because SVG’s rotate() function has a slightly different syntax that does not have an equivalent to the transform-box: fill-box CSS used above, unless you specify an X and Y coordinate for every rotation.
That means you have to put in the rotation point every time, like so:
<rect x="123" y="789" width="50" height="50"
transform="rotate(90 123 789)"
></rect>
<!--
In this example, the rotation pivots around the X and Y coordinates of the `rect` element.
If you wanted to rotate around the center, you would have to calculate:
x + width/2
y + width/2
And use those values in the `rotate()` function instead.
-->
The Problem
The problem I’ve run into is that the CSS solution does not work with <use /> elements.
It’s pretty clear why: the <use /> element clones the referenced element into a new location. So, as far as the CSS is concerned, it is transforming the <use /> element, and not the cloned (Shadow-DOM) content.
When it comes to other challenges involving applying CSS to <use />—such as setting up different color schemes—there are solutions (like this one from SVG superhero Sara Soueidan).
But when it comes to getting around the issue of coordinates, I haven’t figured out a way around this.
Example Code
EDIT: To be more explicit about what I’m going for, here is some sample code.
.transform-tl,
.transform-tc,
.transform-tr,
.transform-cl,
.transform-cc,
.transform-cr,
.transform-bl,
.transform-bc,
.transform-br {
transform-box: fill-box;
}
.transform-tl { transform-origin: top left; }
.transform-tc { transform-origin: top center; }
/*
…and so on, for the other combinations of `transform-origin` keyword values…
*/
.rotate90.cw {
transform: rotate(90deg)
}
.rotate90.ccw {
transform: rotate(-90deg)
}
<!--
Using the CSS classes in the following manner works as intended for most SVG elements as intended.
But with the `<use />` element, the rotation does not pivot around the top left corner, as expected... :(
-->
<use
class="transform-tl rotate90 cw"
x ="0"
y ="1052"
href ="#block-A12-2"
></use>
(Thanks to #PaulLeBeau for the nudge to include this bit of code.)
Does anyone have a solution?
(Even a workaround solution—as long as it involves less repetition than specifying the SVG transform attribute on every <use />—would be welcome!)
Assuming the same conditions as #Sphinxxx postulated...
Then you can also just wrap your <use> element in a group (<g>) element and apply the rotate class to that.
/* whatever elements you want to transform */
rect, polygon, use, g {
transform-box: fill-box;
transform-origin: center center; /* or `top left`, `center right`, etc. */
}
.rotate45 {
transform: rotate(45deg);
}
<svg width="300" height="200">
<defs>
<rect id="rr" x="80" y="60" width="50" height="50" />
</defs>
<use href="#rr" x="100" y="0" fill="tomato" />
<g class="rotate45">
<use href="#rr" x="100" y="0" fill="lime" />
</g>
</svg>
What's going on? Why does this work?
The reason has to do with how <use> elements are dereferenced and what happens to transforms when that happens. If you read the section about <use> elements in the SVG spec, it says:
In the generated content, the ‘use’ will be replaced by ‘g’, where all attributes from the ‘use’ element except for ‘x’, ‘y’, ‘width’, ‘height’ and ‘xlink:href’ are transferred to the generated ‘g’ element. An additional transformation translate(x,y) is appended to the end (i.e., right-side) of the ‘transform’ attribute on the generated ‘g’, where x and y represent the values of the ‘x’ and ‘y’ attributes on the ‘use’ element.
So, the following SVG (which I presume will be something like you were trying):
<use href="#rr" x="100" y="0" fill="lime" class="rotate45" />
will be dereferenced into the equivalent of:
<g fill="blue" transform="rotate(45) translate(100,0)">
<rect x="80" y="60" width="50" height="50" />
</g>
Since you can think of transforms as being applied from right to left, the translate(100,0) will be applied before the rotation, meaning that the rotation will be moving something that is offset 100 pixels away from where you want it. That's why the transform-box: fill-box is not working for <use> elements.
rect, polygon, use, g {
transform-box: fill-box;
transform-origin: center center; /* or `top left`, `center right`, etc. */
}
.rotate45 {
transform: rotate(45deg);
}
<svg width="300" height="200">
<defs>
<rect id="rr" x="80" y="60" width="50" height="50" />
</defs>
<use href="#rr" x="100" y="0" fill="tomato" />
<use href="#rr" x="100" y="0" fill="blue" stroke="blue" class="rotate45" />
<g fill="lime" transform="rotate(45) translate(100,0)">
<rect x="80" y="60" width="50" height="50" />
</g>
</svg>
However with my solution, the <g> + <use> set...
<g class="rotate45">
<use href="#rr" x="100" y="0" fill="lime" />
</g>
will be dereferenced into the equivalent of:
<g class="rotate45">
<g fill="lime" transform="translate(100,0)">
<rect x="80" y="60" width="50" height="50" />
</g>
</g>
rect, polygon, use, g {
transform-box: fill-box;
transform-origin: center center; /* or `top left`, `center right`, etc. */
}
.rotate45 {
transform: rotate(45deg);
}
<svg width="300" height="200">
<defs>
<rect id="rr" x="80" y="60" width="50" height="50" />
</defs>
<use href="#rr" x="100" y="0" fill="tomato" />
<g class="rotate45">
<use href="#rr" x="100" y="0" fill="blue" stroke="blue"/>
</g>
<g class="rotate45">
<g fill="lime" transform="translate(100,0)">
<rect x="80" y="60" width="50" height="50" />
</g>
</g>
</svg>
In this version, each of the two transform operations is applied to different elements, so the transform-box and transform-origin are applied separately. And the transform origin has no effect on translations.
So what that means is that the transform-box calculation for the rotation (ie on the <g>) will be applied to the already-translated object. So it will behave as you want.
In the days before transform-box, these two examples would have given the same result.
So you want to put an element somewhere with <use x="..." y="...", and then rotate it in place?
The simplest solution I have found does include the transform attribute, but you don't need to specify the rotation point. See the following example, where the green rectangle does what you want.
In CSS, we include use elements in the transform-box rule. Then we position and rotate each element with the transform attribute (replacing x, y and CSS rotation):
/* whatever elements you want to transform */
rect, polygon, use {
transform-box: fill-box;
transform-origin: center center; /* or `top left`, `center right`, etc. */
}
.rotate45 {
transform: rotate(45deg);
}
<svg width="300" height="200">
<rect id="rr" x="80" y="60" width="50" height="50" />
<use href="#rr" x="100" y="0" class="rotate45" fill="tomato" />
<use href="#rr" transform="translate(100 0) rotate(45)" fill="lime" />
</svg>
I'm having issues with the transform-origin while attempting to scale sub-elements.
While attempting to scale animate a box within a larger svg, it uses the transform origin (0,0) from the overall svg, rather than the center of the element I am trying to scale.
This makes it appear like it is "flying in from the top left" which is not what I am looking for. I am looking to make it scale from the elements center.
How do I get the transform-origin to be set relative to the specific element I am animating, without having to hardcode the (x,y) position of the sub-element itself.
Here is a simple example of the issue I'm dealing
#keyframes scaleBox {
from {transform: scale(0);}
to {transform: scale(1);}
}
#animated-box {
animation: scaleBox 2s infinite;
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="
width: 195px;
"><defs>
<style>.cls-1{fill:#7f7777;}.cls-2{fill:#fff;}</style>
</defs>
<rect class="cls-1" x="0.5" y="0.5" width="99" height="99"></rect>
<path d="M99,1V99H1V1H99m1-1H0V100H100V0Z"></path>
<rect id="animated-box" class="cls-2" x="10.5" y="8.5" width="22" height="6"></rect></svg>
You need transform-box: fill-box;
#keyframes scaleBox {
from {transform: scale(0);}
to {transform: scale(1);}
}
#animated-box {
transform-box: fill-box;
animation: scaleBox 2s infinite;
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="
width: 195px;
"><defs>
<style>.cls-1{fill:#7f7777;}.cls-2{fill:#fff;}</style>
</defs>
<rect class="cls-1" x="0.5" y="0.5" width="99" height="99"></rect>
<path d="M99,1V99H1V1H99m1-1H0V100H100V0Z"></path>
<rect id="animated-box" class="cls-2" x="10.5" y="8.5" width="22" height="6"></rect></svg>
I'm working on some animated SVGs with CSS animations that triggers on hover.
I'm being able to have the SVG animate on hover the way I want to for Chrome but I'm facing a Firefox and Safari issue.
Apparently, the pointer-events property applied to groups <g></g> doesn't give same behavior on this browser than on the other modern ones, at least when trying to set the value to bounding-box.
I'm doing
g {
pointer-events: bounding-box;
}
but the hover only gets triggered when the actual <path> element is hovered, not the whole group <g> as I would need to.
Can I use doesn't say anything about this, it mentions svgs also have support for this property.
Below there's a sample code for you to see how one of my SVGs looks like.
On chrome hovering the main containing group area will trigger the hover animation, on Firefox the actual path (the icon lines in this case) needs to be hovered in order to that to happen.
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<style>
g {
pointer-events: bounding-box;
//not working on FF
}
#mobile:hover .flip {
transform-origin:55% 50%;
-moz-transform-origin:55% 50%;
animation: flip_left 1.6s forwards;
}
#keyframes flip_left {
0% {transform: perspective(2000px) rotateY(90deg) skewY(-1deg)}
30% {transform:perspective(2000px) rotateY(-25deg) skewY(-0.8deg)}
50% {transform:perspective(2000px) rotateY(20deg) skewY(0.8deg)}
70% {transform:perspective(2000px) rotateY(-10deg) skewY(-0.8deg)}
100% {transform:perspective(2000px) rotateY(0deg)}
}
</style>
<!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
<title>Mobile solutions</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="mobile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="MS_HP_Usecase_Based_Page-Desktop-2A" transform="translate(-766.000000, -418.000000)" stroke="#00A0DF" stroke-width="1.25">
<g id="Asset-5" transform="translate(766.000000, 418.000000)">
<g class="flip">
<rect id="Rectangle-path" stroke-linecap="round" stroke-linejoin="round" x="12.35" y="7.41" width="15.32" height="25.33" rx="2.03"></rect>
<circle id="Oval" stroke-linecap="round" stroke-linejoin="round" cx="20.01" cy="28.72" r="1.58"></circle>
<path d="M18.43,10.72 L21.48,10.72" id="Shape" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
<circle id="Oval" cx="19.67" cy="19.67" r="19.04"></circle>
</g>
</g>
</g>
</svg>
I would like to find a workaround for this, since I want to make this animations work cross browser. I would like to eventually make it work for IE11 and Edge too.
Thanks,
So pointer-events: bounding-box seems to not be supported by most browsers.
I implemented the workaround #ccprog suggested on the comments section of my question.
I added a <rect fill="none"> element to svg, that is same dimensions than the SVG itself. I added a :hover selector for that element and sibling selector ~ to select its sibling group with the flip class inside.
See CSS:
#mobile-hover {
visibility: visible;
pointer-events: visible;
}
#mobile-hover:hover ~ .group .flip {
-moz-transform-origin:55% 50%;
-webkit-transform-origin: 55% 50%;
transform-origin:55% 50%;
-webkit-animation: flip_left 1.6s forwards;
animation: flip_left 1.6s forwards;
}
I found out I had to add pointer-events: visible to the rect element so it would detect the :hover. I added visibility: visible as a requirement to pointer-events: visible to work.
Below the full new SVG code:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="mobile-icon">
<style>
#mobile-hover {
visibility: visible;
pointer-events: visible;
}
#mobile-hover:hover ~ .group .flip {
-moz-transform-origin:55% 50%;
-webkit-transform-origin: 55% 50%;
transform-origin:55% 50%;
-webkit-animation: flip_left 1.6s forwards;
animation: flip_left 1.6s forwards;
}
#keyframes flip_left {
0% {transform: perspective(2000px) rotateY(90deg) skewY(-1deg)}
30% {transform:perspective(2000px) rotateY(-25deg) skewY(-0.8deg)}
50% {transform:perspective(2000px) rotateY(20deg) skewY(0.8deg)}
70% {transform:perspective(2000px) rotateY(-10deg) skewY(-0.8deg)}
100% {transform:perspective(2000px) rotateY(0deg)}
}
</style>
<!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
<title>Mobile solutions</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="mobile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" >
<rect fill="none" width="40" height="40" id="mobile-hover">
</rect>
<g id="MS_HP_Usecase_Based_Page-Desktop-2A" transform="translate(-766.000000, -418.000000)" stroke="#00A0DF" stroke-width="1.25" class="group">
<g id="Asset-5" transform="translate(766.000000, 418.000000)">
<g class="flip">
<rect id="Rectangle-path" stroke-linecap="round" stroke-linejoin="round" x="12.35" y="7.41" width="15.32" height="25.33" rx="2.03"></rect>
<circle id="Oval" stroke-linecap="round" stroke-linejoin="round" cx="20.01" cy="28.72" r="1.58"></circle>
<path d="M18.43,10.72 L21.48,10.72" id="Shape" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
<circle id="Oval" cx="19.67" cy="19.67" r="19.04"></circle>
</g>
</g>
</g>
</svg>
Works on Chrome, Safari and Firefox and I'm attempting to test IE11 and Edge next.
Many thanks,
I want to clip border of div which have some border-radius to imitate how timer expires.
But can't find any way to do it except like with clip-path: polygon(...)
But building custom polygon seems like really hard way to control border length.
Is there some simpler/ more elegant way to do it with CSS (or maybe SVG)?
Here is image of desirable result with few states ⇩⇩
pure svg
The effect of drawing a line is achieved using the attribute of the line stroke-dashoffset, which is an indent from the beginning of the line.
The line is hidden when stroke-dashoffset has a maximum value and is fully visible whenstroke-dashoffset = "0"
Therefore, changing the value of stroke-dashoffset from max to zero, we get the effect of drawing the line.
<svg version="1.1" id="map_line_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300" viewBox="0 0 300 300" >
<rect x="50" y="100" width="200" height="100" rx="50" fill="#E0E9F6" stroke-width="4" stroke="grey" stroke-dashoffset="600" stroke-dasharray="600">
<animate attributeName="stroke-dashoffset" begin="1s" from="600" to="0" dur="7s" repeatCount="indefinite" />
</rect>
</svg>
CSS+SVG
This example is exactly the same as the first example, but the styles of the display style are transferred to an external stylesheet. More information on the drawing technique can be found here - Chris Coyier - stroke-dashoffset
You correctly noticed that the length of the line can be calculated using the JS method - getTotalLength ()
Here is an example of a script that prints the length of the path for figures drawn with path:
<script>
function TotalLength(){
var path = document.querySelector('#check');
var len = Math.round(path.getTotalLength() );
alert("Path length - " + len);
};
</script>
Below is a complete example of animation:
#rect1 {
stroke-dasharray: 600;
stroke-dashoffset: 600;
animation: dash 5s linear alternate infinite;
}
#keyframes dash {
from {
stroke-dashoffset: 600;
}
to {
stroke-dashoffset: 0;
}
}
#rect1 {
fill:#E0E9F6;
stroke-width:4;
stroke:grey;
}
<svg version="1.1" id="map_line_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300" viewBox="0 0 300 300" >
<rect id="rect1" x="50" y="100" width="200" height="100" rx="50" />
</svg>
If you need an animation of the movement of the line in one direction, replace the alternate with forwards
I think that you do not need to animate the offset in this case. In the case of passing through the zero point as well as if you want to start not from the zero point problems may arise.
I would use 2 parameters - the stroke length and the stroke space, like:
<animate attributeName="stroke-dasharray" from="0 600" to="600 0" />
I am stuck with an issue. my goal is to create a blinking eye in svg. I created the graphic converted into svg. Now i planned to put a css animation on it so it looks like its blinking. I spent lot of time on it but not able to solve the issue.
my approach to achieve this effect is to change its g element height with css transition so it will looks like blinking but when i put css on it it just disappear :( below is the css code I used:
#svg_7 path{
transform:scale(0, -1);
-webkit-transform:scale(0, -1);
}
svg code
<g id="svg_7">
<path id="svg_8" d="m35.99502,49.21692c-11.88306,0 -22.25696,5.59302 -27.80701,13.90399c5.55103,8.31104 15.92505,13.90302 27.80701,13.90302c11.88306,0 22.25696,-5.59198 27.80896,-13.90302c-5.55299,-8.31097 -15.92701,-13.90399 -27.80896,-13.90399z" stroke-miterlimit="10" stroke-width="1.4434" stroke="#fa5400" fill="transparent" />
<circle id="svg_9" r="9.83801" cy="63.12191" cx="35.995" stroke-miterlimit="10" stroke-width="1.4434" stroke="#fa5400" fill="transparent" />
Main purpose is to create a blinking eye that keeps blinking after every few seconds. please do suggest me a solution. even we can use js/jquery if required.
jsfiddle link
thanks in advance
Kax
In fact to have the closest effect (to reality) of blinking eye, I think you have to redesign the eye. Such as we need to animate the upper eyelid only (not both). Also the inner pupil should be covered by the eye lid. Doing so is not easy, at least I feel like that it can be done more easily with CSS than with SVG. However the time of shutting the eye lid is short, we can just animate both the eyelid and the inner pupil. Scaling down the vertical size of both to nearly 0 should do the job. However we can notice that the stroke-width becomes thinner at such a small scaling (may create some visible dashed lines instead of a solid one). So we also have to animate (increase) the stroke-width. Here is the CSS code (please run it in webkit-based browsers, it should work for all browsers):
#svg_7 path{
-webkit-transform-origin:50%;
-webkit-animation:blink 3s infinite alternate;
}
#svg_9 {
-webkit-transform-origin:50%;
-webkit-animation:coreblink 3s infinite alternate;
}
#-webkit-keyframes blink {
0%, 96% {
-webkit-transform:scale(1,1);
stroke-width:1.4434px;
}
100% {
-webkit-transform:scale(1,0.05);
stroke-width:6px;
}
}
#-webkit-keyframes coreblink {
0%, 96% {
-webkit-transform:scale(1,1);
}
100% {
-webkit-transform:scale(1,0.05);
}
}
Note that, if you increase the animation-duration (it's 3s in the demo), you should also increase the key percentage (it's 96% in the demo) so that the time of shutting the eye lid is not considerably large. I know this is not perfect (as what I said before), but it's at least acceptable in some use case and hope you are satisfied with it.
Demo.
UPDATE: If you want to save the SVG code into a file, you should also ship the CSS code (used to animate the SVG) along with the SVG file by using <style> tag like this:
<svg width="99" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<style>
#svg_7 path{
-webkit-transform-origin:50%;
-webkit-animation:blink 3s infinite alternate;
}
#svg_9 {
-webkit-transform-origin:50%;
-webkit-animation:coreblink 3s infinite alternate;
}
#-webkit-keyframes blink {
0%, 96% {
-webkit-transform:scale(1,1);
stroke-width:1.4434px;
}
100% {
-webkit-transform:scale(1,0.05);
stroke-width:6px;
}
}
#-webkit-keyframes coreblink {
0%, 96% {
-webkit-transform:scale(1,1);
}
100% {
-webkit-transform:scale(1,0.05);
}
}
</style>
<g id="svg_1">
<rect id="svg_2" height="71.991" width="71.99" stroke-miterlimit="10" stroke-width="1.4434" stroke="#ffffff" fill="transparent" y="0.71191" x="26.195"/>
<line id="svg_3" y2="0.71191" x2="26.195" y1="27.12591" x1="0" stroke-miterlimit="10" stroke-width="1.4434" stroke="#ffffff" fill="transparent"/>
<line id="svg_4" y2="72.70391" x2="26.195" y1="99.11691" x1="0" stroke-miterlimit="10" stroke-width="1.4434" stroke="#ffffff" fill="transparent"/>
<rect id="svg_5" height="71.991" width="71.992" stroke-miterlimit="10" stroke-width="1.4434" stroke="#ffffff" fill="#000000" y="27.12491" x="0"/>
<g id="svg_6">
<g id="svg_7">
<path id="svg_8" d="m35.99502,49.21692c-11.88306,0 -22.25696,5.59302 -27.80701,13.90399c5.55103,8.31104 15.92505,13.90302 27.80701,13.90302c11.88306,0 22.25696,-5.59198 27.80896,-13.90302c-5.55299,-8.31097 -15.92701,-13.90399 -27.80896,-13.90399z" stroke-miterlimit="10" stroke-width="1.4434" stroke="#fa5400" fill="transparent">
</path>
<circle id="svg_9" r="9.83801" cy="63.12191" cx="35.995" stroke-miterlimit="10" stroke-width="1.4434" stroke="#fa5400" fill="transparent" />
</g>
</g>
<polygon id="svg_10" points="98.1849594116211,72.70391845703125 71.9919662475586,99.116943359375 71.9919662475586,27.12591552734375 98.1849594116211,0.7119140923023224 " stroke-miterlimit="10" stroke-width="1.4434" stroke="#ffffff" fill="transparent"/>
</g>
</svg>
Another approach is try using pure SVG animate. However I find it hard to have an equivalent of SVG animation to CSS animation.