SVG rotate animation lagging - html
If you take a look at the pic below, I have two animations running: the outer ring is slowly rotating clockwise and the inner ring is rotating counter-clockwise. It works great in Chrome, but in Safari, the animation lags and is not as smooth as it is in Chrome. Any ideas to why it's lagging in Safari?
body.home {
background-image: url('http://uploadpie.com/5Fy2h');
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
min-height: 800px;
}
////////////////////
//LOGO ANIMATIONS//
///////////////////
svg {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
z-index: -1;
}
svg mask rect {
fill: rgba(255, 255, 255, 0.8);
}
svg > rect {
fill: white;
}
#mask {
position: relative;
right: 250px;
}
.last-overlay {
fill: rgba(255, 255, 255, 0.5);
}
.first-ring-path {
transform-origin: 50% 50%;
-webkit-animation-name: rotate;
-moz-animation-name: rotate;
-ms-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 90s;
-moz-animation-duration: 90s;
-ms-animation-duration: 90s;
-o-animation-duration: 90s;
animation-duration: 90s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
-webkit-transform: translateZ(0);
}
}
#-moz-keyframes rotate {
100% {
-moz-transform: rotate(360deg);
}
}
#-o-keyframes rotate {
100% {
-o-transform: rotate(360deg);
}
}
#-ms-keyframes rotate {
100% {
-ms-transform: rotate(360deg);
}
}
#keyframes rotate {
100% {
transform: rotate(360deg);
}
}
.second-ring-path {
transform-origin: 50% 50%;
-webkit-animation-name: rotate-counter;
-moz-animation-name: rotate-counter;
-ms-animation-name: rotate-counter;
-o-animation-name: rotate-counter;
animation-name: rotate-counter;
-webkit-animation-duration: 90s;
-moz-animation-duration: 90s;
-ms-animation-duration: 90s;
-o-animation-duration: 90s;
animation-duration: 90s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes rotate-counter {
100% {
-webkit-transform: rotate(-360deg);
}
}
#-moz-keyframes rotate-counter {
100% {
-moz-transform: rotate(-360deg);
}
}
#-o-keyframes rotate-counter {
100% {
-o-transform: rotate(-360deg);
}
}
#-ms-keyframes rotate-counter {
100% {
-ms-transform: rotate(-360deg);
}
}
#keyframes rotate-counter {
100% {
transform: rotate(-360deg);
}
}
<body class="home">
<!-- LOGO ANIMATION -->
<svg id="logo-svg" preserveAspectRatio="xMidYMid slice">
<svg version="1.1" id="logo-animation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" xml:space="preserve">
<rect class="last-overlay" x="0" y="0" width="100%" height="100%" />
<mask id="mask" maskUnits="userSpaceOnUse">
<rect x="0" y="0" width="100%" height="100%" />
<svg x="-45%" y="5%" class="logo-animation-container">
<svg class="svg-path" version="1.1" baseProfile="tiny" class="first-ring" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 270" xml:space="preserve">
<g id="pathRotate" class="first-ring-path">
<g>
<g>
<path d="M118.4,237.5c-8.5,0-16.9-0.9-25.1-2.7c-2.8-0.6-4.6-3.4-3.9-6.2c0.6-2.8,3.4-4.5,6.2-3.9
c7.5,1.6,15.2,2.5,22.9,2.5c20.7,0,40.7-6,58-17.3c2.4-1.6,5.6-0.9,7.2,1.5c1.6,2.4,0.9,5.6-1.5,7.2
C163.1,230.9,141.1,237.5,118.4,237.5z" />
</g>
<g>
<path d="M192.5,209.2c-1.4,0-2.8-0.6-3.9-1.7c-1.9-2.1-1.7-5.4,0.4-7.3c3.9-3.5,7.5-7.3,10.9-11.3
c1.8-2.2,5.1-2.5,7.3-0.7s2.5,5.1,0.7,7.3c-3.6,4.4-7.7,8.6-11.9,12.4C195,208.7,193.7,209.2,192.5,209.2z" />
</g>
<g>
<path d="M214.6,181.9c-0.9,0-1.8-0.2-2.6-0.7c-2.5-1.4-3.3-4.6-1.9-7.1c9.3-16,14.1-34.3,14.1-52.9
c0-4.9-0.3-9.8-1-14.5c-0.4-2.8,1.6-5.4,4.4-5.8c2.8-0.4,5.4,1.6,5.8,4.4c0.7,5.2,1.1,10.6,1.1,15.9c0,20.4-5.4,40.5-15.5,58.1
C218.1,181,216.4,181.9,214.6,181.9z" />
</g>
<g>
<path d="M224.7,94.1c-2.2,0-4.3-1.4-4.9-3.7c-2.3-7.7-5.6-15.1-9.6-22.1c-1.4-2.5-0.6-5.6,1.9-7.1
c2.5-1.4,5.6-0.6,7.1,1.9c4.4,7.7,8,15.8,10.5,24.2c0.8,2.7-0.7,5.6-3.4,6.4C225.7,94,225.2,94.1,224.7,94.1z" />
</g>
<g>
<path d="M206.4,58.7c-1.5,0-3.1-0.7-4.1-2c-10.9-14.2-25.3-25.4-41.7-32.5c-2.6-1.1-3.8-4.2-2.7-6.8
s4.2-3.8,6.8-2.7c17.9,7.8,33.7,20.2,45.7,35.7c1.7,2.3,1.3,5.5-0.9,7.2C208.6,58.3,207.5,58.7,206.4,58.7z" />
</g>
<g>
<path d="M41,46.7c-1.3,0-2.7-0.5-3.7-1.6c-2-2-1.9-5.3,0.1-7.3C59.2,16.6,88,5,118.4,5c1.6,0,3.2,0,4.7,0.1
c2.9,0.1,5.1,2.5,5,5.4c-0.1,2.9-2.5,5.1-5.4,5c-1.4-0.1-2.9-0.1-4.3-0.1c-27.7,0-53.9,10.6-73.7,29.9
C43.6,46.2,42.3,46.7,41,46.7z" />
</g>
<g>
<path d="M7.5,119c-0.1,0-0.2,0-0.4,0c-2.8-0.2-5-2.7-4.8-5.5c0.3-4,0.8-8.1,1.5-12.1C6,88.3,10.5,75.7,17,64.2
c1.4-2.5,4.6-3.4,7-2c2.5,1.4,3.4,4.6,2,7c-5.9,10.5-10,21.9-12.1,33.9c-0.6,3.6-1.1,7.4-1.3,11C12.4,116.9,10.2,119,7.5,119z" />
</g>
<g>
<path d="M58.6,220c-1,0-1.9-0.3-2.8-0.8c-26.2-16.7-44.8-43.7-51.2-74c-0.6-2.8,1.2-5.5,4-6.1s5.5,1.2,6.1,4
c5.8,27.6,22.8,52.1,46.6,67.4c2.4,1.5,3.1,4.7,1.6,7.1C61.9,219.2,60.3,220,58.6,220z" />
</g>
</g>
</g>
</svg>
<svg class="svg-path" version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 270 270" xml:space="preserve">
<g class="second-ring-path">
<g>
<g>
<path d="M31.9,147.9c-2.5,0-4.8-1.7-5.4-4.3c-1.8-7.3-2.7-14.8-2.7-22.3c0-7.8,1-15.5,2.8-23c0.8-3,3.8-4.8,6.8-4
c3,0.8,4.8,3.8,4,6.8c-1.7,6.6-2.5,13.4-2.5,20.3c0,6.6,0.8,13.3,2.3,19.7c0.7,3-1.1,6-4.1,6.7C32.8,147.8,32.4,147.9,31.9,147.9
z" />
</g>
<g>
<path d="M117.7,215.2c-29.9,0-57.4-13.8-75.3-37.8c-1.8-2.5-1.3-6,1.1-7.8c2.5-1.8,6-1.3,7.8,1.1
c15.8,21.2,40,33.3,66.4,33.3c6,0,12-0.6,17.8-1.9c3-0.7,6,1.2,6.7,4.3c0.7,3-1.2,6-4.3,6.7C131.4,214.5,124.6,215.2,117.7,215.2
z" />
</g>
<g>
<path d="M154.4,207.3c-2.1,0-4.1-1.2-5.1-3.3c-1.3-2.8,0-6.1,2.8-7.4c23.5-10.7,40.9-32.2,46.5-57.4
c0.7-3,3.6-4.9,6.7-4.2c3,0.7,4.9,3.6,4.2,6.7c-6.3,28.6-26,53-52.8,65.2C156,207.1,155.2,207.3,154.4,207.3z" />
</g>
<g>
<path d="M206.1,126.9c-3.1,0-5.6-2.5-5.6-5.6c0-14.2-3.7-28.3-10.6-40.6c-1.5-2.7-0.6-6.1,2.1-7.6
c2.7-1.5,6.1-0.6,7.6,2.1c7.9,14,12.1,29.9,12.1,46.1C211.7,124.4,209.2,126.9,206.1,126.9z" />
</g>
<g>
<path d="M185.2,69.8c-1.6,0-3.2-0.7-4.3-2c-9.7-11.5-22.4-20.1-36.5-24.9c-2.9-1-4.5-4.2-3.5-7.1
c1-2.9,4.2-4.5,7.1-3.5c16.1,5.5,30.4,15.2,41.4,28.3c2,2.4,1.7,5.9-0.7,7.9C187.7,69.4,186.4,69.8,185.2,69.8z" />
</g>
<g>
<path d="M45.9,75.3c-1.1,0-2.3-0.3-3.2-1c-2.5-1.8-3.1-5.3-1.3-7.8c11.4-15.9,27.2-27.7,45.8-34.1
c4.4-1.5,8.9-2.7,13.4-3.5c3-0.6,6,1.4,6.5,4.5c0.6,3-1.4,6-4.5,6.5c-4,0.7-7.9,1.8-11.8,3.1c-16.4,5.6-30.3,16-40.3,30
C49.4,74.5,47.7,75.3,45.9,75.3z" />
</g>
</g>
</g>
</svg>
<svg class="svg-path" version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 270 270" xml:space="preserve">
<g>
<g>
<path d="M116.8,50.7c-39.3,0-71.3,32-71.3,71.3c0,39.3,32,71.3,71.3,71.3c39.3,0,71.3-32,71.3-71.3
C188,82.7,156.1,50.7,116.8,50.7z M138.5,122c0,34.5-11.5,60.3-21.8,60.3c-10.3,0-21.8-25.8-21.8-60.3c0-34.5,11.5-60.3,21.8-60.3
C127,61.7,138.5,87.5,138.5,122z M56.5,122c0-26.1,16.7-48.4,40-56.8C88.8,78,84,98.3,84,122c0,23.7,4.8,44,12.5,56.8
C73.2,170.4,56.5,148.1,56.5,122z M137,178.8c7.7-12.8,12.5-33,12.5-56.8c0-23.7-4.8-44-12.5-56.8c23.3,8.3,40,30.6,40,56.8
C177,148.1,160.3,170.4,137,178.8z" />
</g>
</g>
</svg>
</svg>
<!-- /logo-animation-container -->
</mask>
< </svg>
<rect id="rect" mask="url(#mask)" x="0" y="0" width="100%" height="100%" />
</svg>
</body>
Here is animating smoothly. No lag. But running the snippet in Safari (OSX 10.8.5 Safari 6.2.8) the animations is different, broken. One ring stay static while the other is going up. But all in a smooth fashion.
Anyway check here: https://www.theparticlelab.com/safari-svg-animation-bug/
Related
Text on a Circle Path around an SVG Image
I'm attempting to have animated text moving on a circular path around an image. I have the circular text, but I can't get the image on the inside. Here is the code I'm using: <div id="container"> <div id="circle"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 400 400" enable-background="new 0 0 100 100" xml:space="preserve" > <defs> <path id="circlePath" d=" M 200, 200 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 "/> </defs> <circle cx="150" cy="100" r="75" fill="none"/> <g> <use xlink:href="#circlePath" fill="none"/> <text fill="#ffb605"> <textPath xlink:href="#circlePath">Flip the Bird • Flip the Bird • </textPath> </text> </g> </svg> </div> </div> Here is the full code on JSFiddle I created. The svg I'm trying to place in the middle is this: https://svgshare.com/i/Z4d.svg Any help would be appreciated.
You could achieve this with the image tag:
<image
x="165"
y="150"
width="88"
height="100"
xlink:href="PATH_TO_YOUR_IMAGE.EXTENSION"
/>
or (like in your linked svg)
<image
...
xlink:href="data:img/png;base64,YOUR_LOOOOONG_IMAGE_DATA"
/>
To move only the text and not the whole image (inkl. the inner bird image) you should define the rotation only for the text:
#circle svg text {
transform-origin: 50% 50%;
animation-name: rotate;
...
}
Working example: (i removed the circle because it wasn't used)
Unfortunately your linked svg doesn't work here because it's on another domain (but worked locally in my test file). And the inline image data from that svg doesn't fit in the stack snippet (also worked locally in my test file). Therefor i used a simple rect for demonstration.
#container {
margin: 0%;
margin-top: 0px;
margin-bottom: 0px;
}
#circle {
position: relative;
width: 500px;
padding-bottom: 0%;
overflow: visible;
z-index: 2;
}
#circle text {
margin: 0 calc(.14em * -1) 0 0;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
font-size: .83em;
font-style: normal;
font-weight: 400;
line-height: 1.4;
letter-spacing: .14em;
text-transform: uppercase;
color: black;
background: linear-gradient(-67deg, #000000 0%, #988d87 28%, #797371 52%, #5e5855 82%, #000000 100%);
background-size: 100% auto;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
letter-spacing: .32em;
}
#circle svg {
position: absolute;
left: 140px;
top: -110px;
width: 100%;
height: 430px;
}
#circle svg text {
transform-origin: 50% 50%;
-webkit-animation-name: rotate;
-moz-animation-name: rotate;
-ms-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
-ms-animation-duration: 10s;
-o-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0);
}
to {
-moz-transform: rotate(360deg);
}
}
#-ms-keyframes rotate {
from {
-ms-transform: rotate(0);
}
to {
-ms-transform: rotate(360deg);
}
}
#-o-keyframes rotate {
from {
-o-transform: rotate(0);
}
to {
-o-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
#media screen and ( max-width: 979px) {
#circle svg {
left: 0px !important;
top: -70px !important;
height: 360px;
}
}
#media screen and ( max-width: 480px) {
#circle svg {
left: -140px !important;
top: 140px !important;
}
}
<div id="container">
<div id="circle">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 400 400" enable-background="new 0 0 100 100" xml:space="preserve">
<defs>
<path id="circlePath" d=" M 200, 200 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 "/>
</defs>
<g>
<use xlink:href="#circlePath" fill="none"/>
<rect
x="160"
y="160"
width="80"
height="80"
fill="#FCDB8D"
/>
<text fill="#ffb605">
<textPath xlink:href="#circlePath">Flip the Bird • Flip the Bird • </textPath>
</text>
</g>
</svg>
</div>
</div>
How do I move an SVG group with CSS keyframes?
I want to move SVG elements across their container using CSS keyframes.
If I had just a <circle />, I could simply use the cx / cy properties in the keyframe definition. But what if I had an arbitrary group (<g />)? A group doesn't have cx / cy, and it seems that I have to define a unit (like px) if I wanted to use CSS' transform: translate(x,y).
MWE (how do I animate the bar group?):
svg {
padding: 5px;
width: 150px;
height: 150px;
border: 1px solid #000;
}
.foo {
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: moveFoo;
}
.bar {
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: moveBar;
}
#keyframes moveFoo {
from {
cx: 10;
cy: 10;
}
to {
cx: 90;
cy: 90;
}
}
/* how to define this? */
#keyframes moveBar { }
<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle class="foo" r="5" fill="red" />
<g class="bar" transform="translate(90 10)">
<circle r="5" fill="blue" />
<text
y="1"
text-anchor="middle"
fill="white"
font-family="monospace"
font-size="5">
AB
</text>
</g>
</svg>
Use animateTransform to do this:
svg {
padding: 5px;
width: 150px;
height: 150px;
border: 1px solid #000;
}
<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle class="foo" r="5" fill="red" />
<g id="bar" transform="translate(90 10)">
<circle r="5" fill="blue" />
<text
y="1"
text-anchor="middle"
fill="white"
font-family="monospace"
font-size="5">
AB
</text>
</g>
<animateTransform xlink:href="#bar"
attributeName="transform"
type="translate"
from="90,10" to="90,90"
dur="2" repeatCount="indefinite"/>
</svg>
it seems that I have to define a unit (like px) if I wanted to use
CSS' transform: translate(x,y).
Yes, it's true, you do.
But that won't be an issue, if you have already declared a viewbox attribute in the <svg> element.
If you have declared a viewbox, 1px will represent 1 viewbox unit.
Working Example:
svg {
padding: 5px;
width: 150px;
height: 150px;
border: 1px solid #000;
}
.foo {
fill: red;
transform: translate(10px, 10px);
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: moveFoo;
}
.bar {
transform: translate(90px, 10px);
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: moveBar;
}
.bar circle {
fill: blue;
}
.bar text {
fill: white;
font-family: monospace;
font-size: 5px;
text-anchor: middle;
}
#keyframes moveFoo {
0% {transform: translate(10px, 10px);}
50% {transform: translate(90px, 90px);}
100% {transform: translate(10px, 10px);}
}
#keyframes moveBar {
0% {transform: translate(90px, 10px);}
50% {transform: translate(10px, 90px);}
100% {transform: translate(90px, 10px);}
}
<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle class="foo" r="5" />
<g class="bar">
<circle r="5" />
<text y="1">AB</text>
</g>
</svg>
If you need to use #keyframes instead of animating the cx and cy attributes you have to animate from transform:translate(0,0) to transform:translate(90px,90px) (for example.)
Otherwise Temani Afif's answer is perfectly valid.
`
svg {
padding: 5px;
width: 150px;
height: 150px;
border: 1px solid #000;
}
.foo {
transform:translate(0,0);
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: moveFoo;
}
.bar {
transform:translate(0,0);
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: moveBar;
}
#keyframes moveFoo {
from {
transform:translate(0,0)
}
to {
transform:translate(90px,90px)
}
}
/* how to define this? */
#keyframes moveBar {
from {
transform:translate(0,0)
}
to {
transform:translate(90px,90px)
}
}
<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle class="foo" r="5" fill="red" />
<g class="bar" >
<circle r="5" fill="blue" cx="10" cy="10" />
<text
x="10"
y="11"
text-anchor="middle"
fill="white"
font-family="monospace"
font-size="5">
AB
</text>
</g>
</svg>
SVG loader not spinning correctly in Firefox
I'm trying to update an svg loader from a smil animation to a css animation.
This is the original svg and the CSS animations:
svg path
{
-webkit-animation: spin 0.6s linear infinite;
-moz-animation: spin 3s linear infinite;
animation: spin 0.6s linear infinite;
}
#-moz-keyframes spin
{
0% { -moz-transform: rotate(0deg); -moz-transform-origin: 100% 100%; }
100% { -moz-transform: rotate(360deg); -moz-transform-origin: 100% 100%; }
}
#-webkit-keyframes spin
{
0% { -webkit-transform: rotate(0deg); -webkit-transform-origin: 100% 100%; }
100% { -webkit-transform: rotate(360deg); -webkit-transform-origin: 100% 100%; }
}
#keyframes spin
{
0% { transform:rotate(0deg); transform-origin: 100% 100%; }
100% { transform:rotate(360deg); transform-origin: 100% 100%; }
}
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="130px" height="130px" viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve">
<path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite" />
</path>
</svg>
It looks correct in Chrome but all wrong in Firefox and I can't understand why (try the Codepen here to see what I mean). Any ideas why?
It doesn't work for me in Chrome either. At least not with recent Chromes anyway - which have a correct implementation of transform-origin.
#loader-2 path
{
-webkit-animation: spin 0.6s linear infinite;
-moz-animation: spin 3s linear infinite;
animation: spin 0.6s linear infinite;
}
#-moz-keyframes spin
{
0% { -moz-transform: rotate(0deg); -moz-transform-origin: 100% 100%; }
100% { -moz-transform: rotate(360deg); -moz-transform-origin: 100% 100%; }
}
#-webkit-keyframes spin
{
0% { -webkit-transform: rotate(0deg); -webkit-transform-origin: 100% 100%; }
100% { -webkit-transform: rotate(360deg); -webkit-transform-origin: 100% 100%; }
}
#keyframes spin
{
0% { transform:rotate(0deg); transform-origin: 100% 100%; }
100% { transform:rotate(360deg); transform-origin: 100% 100%; }
}
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="130px" height="130px" viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve">
<path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite" />
</path>
</svg>
<svg version="1.1" id="loader-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="130px" height="130px" viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve">
<path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"/>
</svg>
The problem is that, in SVGs, the percentage transform-origin coordinates are calculated relative to the whole SVG. Not the element they are used on.
So transform-origin: 100% 100%; here means the bottom right of the SVG. Not the bottom right of <path>.
The fix is to tell the browser that you want the origin to be calculated ralative to the path. You do that with the following property:
transform-box: fill-box;
Demo:
#loader-2 path
{
-webkit-animation: spin 0.6s linear infinite;
-moz-animation: spin 3s linear infinite;
animation: spin 0.6s linear infinite;
transform-box: fill-box;
}
#-moz-keyframes spin
{
0% { -moz-transform: rotate(0deg); -moz-transform-origin: 100% 100%; }
100% { -moz-transform: rotate(360deg); -moz-transform-origin: 100% 100%; }
}
#-webkit-keyframes spin
{
0% { -webkit-transform: rotate(0deg); -webkit-transform-origin: 100% 100%; }
100% { -webkit-transform: rotate(360deg); -webkit-transform-origin: 100% 100%; }
}
#keyframes spin
{
0% { transform:rotate(0deg); transform-origin: 100% 100%; }
100% { transform:rotate(360deg); transform-origin: 100% 100%; }
}
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="130px" height="130px" viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve">
<path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite" />
</path>
</svg>
<svg version="1.1" id="loader-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="130px" height="130px" viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve">
<path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"/>
</svg>
Trow away your svg =))
.loader
{
width:50px; height:50px;
border:solid 7px transparent;
border-top-color:rgba(0, 0, 0, .87);
border-radius:55%;
animation: spin 1s linear infinite;
}
#keyframes spin
{
100% {transform:rotateZ(360deg)}
}
<hr class="loader">
Filling a rotating circular SVG with a pattern image
So i've got this text that rotates around this circle using SVG. I'd like to fill it with an image to make it less bland. This is the code I have in my HTML.
<div id="container">
<div id="circle">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px"
height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<defs>
<pattern id='my_portrait'>
<image xlink:href="http://gastv.mx/wp-content/uploads/2014/05/jumex.jpg" x="-30" y="-30"
width="380" height="267" />
</pattern>
<path id="circlePath" d=" M 150, 150 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 " />
</defs>
<circle cx="150" cy="100" r="75" fill="none"/>
<g id="rotating_text">
<use xlink:href="#circlePath" fill="rgb(81,84,77)" stroke="black" stroke-width="2px"/>
<text fill="#000">
<textPath xlink:href="#circlePath" fill="white">Curse this circular mass of misery!!!</textPath>
</text>
</g>
</svg>
</div>
</div>
And this is the CSS defining speed and browser support.
#circle svg {
width: 100%;
-webkit-animation-name: rotate;
-moz-animation-name: rotate;
-ms-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 20s;
-moz-animation-duration: 20s;
-ms-animation-duration: 20s;
-o-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(360deg);
}
to {
-moz-transform: rotate(0);
}
}
#-ms-keyframes rotate {
from {
-ms-transform: rotate(360deg);
}
to {
-ms-transform: rotate(0);
}
}
#-o-keyframes rotate {
from {
-o-transform: rotate(360deg);
}
to {
-o-transform: rotate(0);
}
}
#keyframes rotate {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0);
}
}
I've tried a couple of different methods of trying to fill the inside circle but nothing ever seems to make a difference. Any help would be sorely appreciated!
add patternUnits="userSpaceOnUse" height="380" width="267" in my_portrait
and also add fill="url(#my_portrait)" in circlePath
#circle svg {
width: 100%;
-webkit-animation-name: rotate;
-moz-animation-name: rotate;
-ms-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 20s;
-moz-animation-duration: 20s;
-ms-animation-duration: 20s;
-o-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(360deg);
}
to {
-moz-transform: rotate(0);
}
}
#-ms-keyframes rotate {
from {
-ms-transform: rotate(360deg);
}
to {
-ms-transform: rotate(0);
}
}
#-o-keyframes rotate {
from {
-o-transform: rotate(360deg);
}
to {
-o-transform: rotate(0);
}
}
#keyframes rotate {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0);
}
}
<div id="container">
<div id="circle">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px"
height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<defs>
<pattern id='my_portrait' patternUnits="userSpaceOnUse" height="380" width="267">
<image xlink:href="http://gastv.mx/wp-content/uploads/2014/05/jumex.jpg" x="-30" y="-30"
width="380" height="267" />
</pattern>
<path id="circlePath" d=" M 150, 150 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 " fill="url(#my_portrait)" />
</defs>
<circle cx="150" cy="100" r="75" fill="none"/>
<g id="rotating_text">
<use xlink:href="#circlePath" fill="rgb(81,84,77)" stroke="black" stroke-width="2px"/>
<text fill="#000">
<textPath xlink:href="#circlePath" fill="white">Curse this circular mass of misery!!!</textPath>
</text>
</g>
</svg>
</div>
</div>
SVG is Invalid and Won't Display on Web
So I made a bunch of edits to an SVG file and now I can't open in in AI and it will not display on web. I'm guessing it is due to the fact that I have HTML elements inside it like the tags but I am not sure how to get around that without breaking the rest of the code.
<div>
<div id="banner">
<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<defs>
<clipPath id="drop">
<path transform="scale(0.75), translate(32,0)" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.7c12.2,0,19.4,6.9,19.4,18.7v37.2
c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
</clipPath>
</defs>
<g clip-path="url(#drop)">
<g class="fill">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
</g>
</g>
<g transform="scale(0.75), translate(32,0)">
<path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z" />
<path class="st1" d="M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.7c12.2,0,19.4,6.9,19.4,18.7v37.2
c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
</g>
<defs>
<style type="text/css">
.st0 {
fill: none;
stroke: #000;
stroke-width: 4;
stroke-miterlimit: 5;
}
.st1 {
fill: none;
stroke: #fff;
stroke-width: 3;
stroke-miterlimit: 5;
}
#banner {
border-radius: 50%;
width: 150px;
height: 150px;
background: #fff;
overflow: hidden;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
}
#banner .fill {
animation-name: fillAction;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
animation-duration: 4s;
animation-fill-mode: forwards;
}
#banner #waveShape {
animation-name: waveAction;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 0.5s;
width: 300px;
height: 150px;
fill: #04ACFF;
}
#keyframes fillAction {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, -5px);
}
}
#keyframes waveAction {
0% {
transform: translate(-150px, 0);
}
100% {
transform: translate(0, 0);
}
}
</style>
</defs>
</svg>
</div>
</div>
</div>