CODEWITHSUNDEEP
htmlsvg
Aravind
Aravind

Reputation: 845

How to move a svg element?

Am new to web application development and I am actually trying to move a svg element and have some problems....here is the code for your reference.

<!DOCTYPE html>
<html>
<body>

 <svg width=500 height=500>
              <circle cx="200" cy="200" r="100" stroke="black" stroke-width="4" fill="black" />
              <g transform="translate(200,200)">
              <line x1="0" y1="0" x2="100" y2="0" style="stroke:rgb(255,255,255);stroke-width:2">
                <animateTransform attributeName="transform"
                        attributeType="XML"
                        type="rotate"
                        from="0" to="360" dur="100s"/>
              </line>
            </svg>

</body>
</html>

Copy paste & try it,to get the clear context

And my requirement is I want to rotate the "line" along the circle,but I want it to rotate for my values(eg: I want to get line placed in a position that I want to palce it,but for my code it starts rotating automatically from begin to end position)...

Any help would be appreciated..

Upvotes: 4

Views: 9155

Answers (2)

Persijn
Persijn

Reputation: 14990

Here is an attempt at what i think you want:

<svg width=500 height=500>
  <circle cx="100" cy="100" r="100" stroke="black" stroke-width="4" fill="black" />
  <g transform="translate(100 100)">
    <g>
      <line x1="0" y1="0" x2="100" y2="0" stroke="white" stroke-width="5" />
      <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="100s" />
    </g>
  </g>
</svg>

Why do i need one more g element? If you inspect the element you will see that the animateTransform adds transform attribute to the <g> element so if you set a translate and use animateTransform it will over ride it.

If you want to animate a line around the circle you can use stroke properties:

.circ {
  animation: rotate 3s infinite;
}
@keyframes rotate {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 500;
  }
}
@-webkit-keyframes rotate {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 500;
  }
}
<svg width="300px" viewBox="0 0 100 100">
  <circle class="circ" cx="50" cy="50" r="20" fill="black" stroke="red" stroke-width="4" stroke-dasharray="70" />
</svg>

or if you want some thing to actually move on a path then:

<svg width="500" height="350" viewBox="0 0 500 350">
  <path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10" d="M202.4,58.3c-13.8,0.1-33.3,0.4-44.8,9.2
    c-14,10.7-26.2,29.2-31.9,45.6c-7.8,22.2-13.5,48-3.5,70.2c12.8,28.2,47.1,43.6,68.8,63.6c19.6,18.1,43.4,26.1,69.5,29.4
    c21.7,2.7,43.6,3.3,65.4,4.7c19.4,1.3,33.9-7.7,51.2-15.3c24.4-10.7,38.2-44,40.9-68.9c1.8-16.7,3.4-34.9-10.3-46.5
    c-9.5-8-22.6-8.1-33.2-14.1c-13.7-7.7-27.4-17.2-39.7-26.8c-5.4-4.2-10.4-8.8-15.8-12.9c-4.5-3.5-8.1-8.3-13.2-11
    c-6.2-3.3-14.3-5.4-20.9-8.2c-5-2.1-9.5-5.2-14.3-7.6c-6.5-3.3-12.1-7.4-19.3-8.9c-6-1.2-12.4-1.3-18.6-1.5
    C222.5,59,212.5,57.8,202.4,58.3" />

  <g id="shape">
    <circle cx="0" cy="0" r="10" fill="cornflowerblue" />
    <line x1="0" y1="0" x2="0" y2="-20" stroke="black" stroke-width="5" />
  </g>

  <animateMotion xlink:href="#shape" dur="3s" begin="0s" fill="freeze" repeatCount="indefinite" rotate="">
    <mpath xlink:href="#motionPath" />
  </animateMotion>
</svg>

Upvotes: 3

Paul LeBeau
Paul LeBeau

Reputation: 101820

Your question is not clear. It sounds like you are saying you don't want it to have a rotation animation. You just want the line to be at a 45deg angle. Is that right?

If that is what you want, then remove the animateTransform element, and just put a fixed transform on the line. Like follows:

<svg width=500 height=500>
    <circle cx="200" cy="200" r="100" stroke="black" stroke-width="4" fill="black" />
    <g transform="translate(200,200)">
        <line x1="0" y1="0" x2="100" y2="0" style="stroke:rgb(255,255,255);stroke-width:2"
              transform="rotate(45)"/>
    </g>
</svg>

Upvotes: 2

Related Questions