Hello! Such a problem. When applying transform:scale() on the svg, the circle object, the scale, is also applied to the cx cy attributes. I need to achieve a scale effect only on the size of the element. Here are some examples.

As it is: the first

It should be: second

Immediately I say, transform-origin: center not suitable (although in "as it should be, I use it") and the viewBox too.

The centering itself takes place after the installation of the cx: 50% cy: 50% setting, but as I said in the transform:scale() output values ​​decrease.

  • you did not like the answer? If this solution suits you, please mark your question as resolved. - Alexandr_TT
  • @Alexandr_T I already solved this problem half a year ago, but I don’t remember how much :) But your answer also fits - David Arutiunian
  • thank you I will explain my position. At each asked question, at least some interested parties: - Alexandr_TT
  • The site itself, which is interested in increasing the percentage of questions answered. Other site users who see that there is no answer try to answer the question. And of course the respondent is interested in getting an assessment of the author of the question. - Alexandr_TT

1 answer 1

@David Arutiunian, as I understood from the question, it is necessary that during the animation the coordinates of the center of the circle cx , cy should not change, and the radius of the circle r should increase. I can offer an option using SMIL animation.

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300" viewBox="0 0 300 300"> <rect width="100%" height="100%" fill="gold"/> <circle id="circl" cx="150" cy="150" r="30" fill="dodgerblue" stroke-width="3" stroke="blue" > <animate attributeName="r" dur="20s" begin="0.25s" values="30;150;30" repeatCount="indefinite" feel="freeze" /> </circle> </svg>

In the example, decrease and increase. If you only need to increase the radius of the circle, change the value to the following - values ​​= "30; 150"

In general, play around with the attributes of the animation to increase the speed of the animation, reduce the value of dur = "10s"

If you only need one loop of animation - repeatCount = "1"

Add this SVG file to HTML better through object

 <object type="image/svg+xml" data="circle.svg" width="300" height="300"> <img src="circle.png" width="300" height="300" alt="image format png" /> </object>

You can complicate a little example - when you hover the cursor, the circle will increase, when clicked, it will decrease

 <svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="150" viewBox="0 0 150 150"> <rect width="100%" height="100%" fill="yellowgreen"/> <circle id="circl" cx="75" cy="75" r="15" fill="#9C27B0" stroke-width="2" stroke="#53155E" > <animate id="inc" attributeName="r" dur="3s" begin="circl.mouseover" values="15;74" repeatCount="1" fill="freeze" restart="whenNotActive" /> <animate attributeName="r" dur="3s" begin="circl.click" values="74;15" repeatCount="1" fill="freeze" restart="whenNotActive" /> </circle> </svg>