0
   

I need to set tex fixed(without rotation), but hexagon needs to rotate.

 
 
Reply Wed 9 Aug, 2017 06:16 am
<!DOCTYPE html>
<html>
<head>
<style>

#krug {
position: absolute;
top: 200px;
left: 250px;
width: 200px;
height: 200px;
border-radius: 100%;
background-color: red;
-webkit-animation-name: example;
-webkit-animation-duration: 2s;
animation-name: example;
animation-duration: 2s;
= }



/* Standard syntax */
@keyframes example {
0% {background-color:red; left:250px; top:200px;}
25% {background-color:yellow; left:250px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<svg width="250" height="250" viewBox="0 0 120 120"

xmlns="http://www.w3.org/2000/svg">

<polygon points="60,20 100,40 100,80 60,100 20,80 20,40"/>
<text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" fill="RED">TEXT</text>
<animate attributeName="fill" from="black" to="blue" dur="10s" fill="freeze" />

<animateTransform attributeType="xml"
3
attributeName="transform"
4
type="rotate"
5
from="0 0 0"
6
to="360 0 0"
7
dur="10s"
8
repeatCount="1"/>


</svg>



<div id="krug" onclick="obrni()"></div>
<script type="text/javascript">
function obrni(){
document.getElementById("krug").className ="krug";
}
</script>



</body>
</html>
  • Topic Stats
  • Top Replies
  • Link to this Topic
Type: Question • Score: 0 • Views: 249 • Replies: 0
No top replies

 
 

 
  1. Forums
  2. » I need to set tex fixed(without rotation), but hexagon needs to rotate.
Copyright © 2019 MadLab, LLC :: Terms of Service :: Privacy Policy :: Page generated in 0.03 seconds on 03/22/2019 at 08:58:26