Menu
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..
341
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>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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
