HTML SVG Scale Rotate move Animation

                          Rajeev Tiwari
(1)  <!DOCTYPE html>
<html>
<body>

 <p><strong>Note:</strong> This example does not work in Internet Explorer and Safari.</p>

 <svg width="500" height="500">
  <g transform="translate(100,100)">
    <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24"> It's SVG!
      <animateMotion path="M 0 0 L 100 100" dur="5s" fill="freeze" />
    </text>
  </g>
  Sorry, your browser does not support inline SVG.  
</svg>

 </body>
</html>


(2)  <!DOCTYPE html>
<html>
<body>

<p><strong>Note:</strong> This example does not work in Internet Explorer and Safari.</p>

<svg width="600" height="600">
  <g transform="translate(100,100)"> 
    <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24; visibility:hidden"> It's SVG!
      <set attributeName="visibility" attributeType="CSS" to="visible" begin="1s" dur="5s" fill="freeze" />
      <animateMotion path="M 0 0 L 100 100" begin="1s" dur="5s" fill="freeze" />
      <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="1s" dur="5s" fill="freeze" /> 
      <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="1s" dur="5s" fill="freeze" /> 
    </text> 
  </g> 
  Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>



(3). <!DOCTYPE html>
<html>
<body>

<p><strong>Note:</strong> This example does not work in Internet Explorer and Safari.</p>

<svg width="600" height="600">
  <rect id="rec" x="300" y="100" width="300" height="100" style="fill:lime"> 
    <animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0" /> 
    <animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0" /> 
    <animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="800" /> 
    <animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="300" /> 
    <animate attributeName="fill" attributeType="CSS" from="lime" to="red" begin="2s" dur="4s" fill="freeze" />
  </rect>
  <g transform="translate(100,100)"> 
    <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24; visibility:hidden"> It's SVG!
      <set attributeName="visibility" attributeType="CSS" to="visible" begin="1s" dur="5s" fill="freeze" />
      <animateMotion path="M 0 0 L 100 100" begin="1s" dur="5s" fill="freeze" />


(4). <!DOCTYPE html>
<html>
<body>

<p><strong>Note:</strong> This example does not work in Internet Explorer and Safari.</p>

<svg width="100%" height="300px">
<g id="R1" transform="translate(250 250)"> 
  <ellipse rx="100" ry="0" opacity=".3">
  <animateTransform attributeName="transform" type="rotate" dur="7s" from="0" to="360" repeatCount="indefinite" />
  <animate attributeName="cx" dur="8s" values="-20; 220; -20" repeatCount="indefinite" />
  <animate attributeName="ry" dur="3s" values="10; 60; 10" repeatCount="indefinite" />
  </ellipse>
</g>
<use xlink:href="#R1" transform="rotate(72 390 150)" />
<use xlink:href="#R1" transform="rotate(144 390 150)" />
<use xlink:href="#R1" transform="rotate(216 390 150)" />
<use xlink:href="#R1" transform="rotate(288 390 150)" />
</svg>

</body>
</html>

मैं इस ब्लॉग का संस्थापक और एक पेशेवर ब्लॉगर हूं। यहाँ पर मैं नियमित रूप से अपने पाठकों के लिए उपयोगी और मददगार जानकारी शेयर करता हूं। 
Written by Rajeev Tiwari

Comments

Post a Comment

Popular posts from this blog

URL क्या है

Image
                       Rajeev Ranjan Tiwari URL क्या है क्या आप  URL  शब्द से परिचित हैं? अगर आप इन्टरनेट का इस्तेमाल करते हैं, तो हम guarantee से यह कह सकते हैं कि आपने “URL” के बारे में जरुर सुना होगा और देखा भी होगा। आज के इस लेख में हम आपको बताने वाले हैं कि  URL क्या है  (What is URL in Hindi)  और इसके 3 सबसे महत्वपूर्ण Parts  कौन से हैं? तो यह जानने के लिये आज के इस article को पूरा पढ़ें। URL क्या है (What is URL in Hindi) Url   का full form होता है Uniform Resource Locator, URL इंटरनेट पर किसी विशिष्ट (specific) website, page या file का एक स्थान (location) होता है। URL के तीन महत्वपूर्ण Parts तो, आईये अब जानते हैं कि URL के 3 Important Parts कौन से है: 1. The protocol निम्नलिखित URL पर विचार करें: https: //www. rajupandit12. Blogspot.com/firewall  इस address का सबसे आसान हिस्सा जो है वह सबसे पहला हिस्सा है। आप शायद हर URL की शुरुआत में http: // और https: // देखते होंगे, पर शायद आप इ...
Read more

Java Data type

Image
                       Rajeev Ranjan Tiwari Java Data Types As explained in the previous chapter, a variable in Java must be a specified data type: (1) public class MyClass {  public static void main(String[] args)  { int myNum = 5; // integer (whole number)  float myFloatNum = 5.99f; // floating point number  char myLetter = 'D'; // character  boolean myBool = true; // boolean  String myText = "Hello"; // String  System.out.println(myNum);  System.out.println(myFloatNum);  System.out.println(myLetter);  System.out.println(myBool);  System.out.println(myText); } }  (2) public class MyClass {  public static void main(String[] args) {  byte myNum = 100;  System.out.println(myNum); } }  (3) public class MyClass {  public static void main(String[] args) {  short myNum = 5000;  System.out.println(myNum); } } (4) public class MyClass { ...
Read more

Java introduction

Image
                      Rajeev Ranjan Tiwari   Java  Tutorials What is Java? Java is a popular programming language, created in 1995. It is owned by Oracle, and more than  3 billion  devices run Java. It is used for: Mobile applications (specially Android apps) Desktop applications Web applications Web servers and application servers Games Database connection And much, much more! Why Use Java? Java works on different platforms (Windows, Mac, Linux, Raspberry Pi, etc.) It is one of the most popular programming language in the world It is easy to learn and simple to use It is open-source and free It is secure, fast and powerful It has a huge community support (tens of millions of developers) Java is an object oriented language which gives a clear structure to programs and allows code to be reused, lowering development costs As Java is close to   and  it makes it easy for programmers to switch to J...
Read more