Как исправить не масштабирующий круг в svg: ошибок не появляется - PullRequest
Новая
       29

Как исправить не масштабирующий круг в svg: ошибок не появляется

1 голос
/ 29 апреля 2019

Я пытаюсь расширить круг с 1px радиуса до 20px радиуса, используя масштабную анимацию в SVG.Текущий радиус равен 1px, и я пытаюсь увеличить его до 20x.Проблема в том, что всякий раз, когда я пытаюсь запустить код, точка 1px перемещается вверх и влево, а затем внезапно выходит за пределы SVG

Я пытался использовать atributeType="xml" с atributeName="r", а также atributeName="transform" type="scale"

это ссылка для всего кода: https://pastebin.com/ARR2kUfM


      <animatetransform
      attributeType="xml"
      attributeName="transform"
      type="scale"
      from="1"
      to="20"
       begin="0s"
       dur="2s"
       repeatCount="indefinite"
       fill="freeze"
      />

        </circle>

Я бы хотел, чтобы точка масштабировалась наружу от центра до 20 пикселей без смещения, нотекущий результат - кружок, летящий за пределы экрана.

1 Ответ

2 голосов
/ 29 апреля 2019

Координаты любой фигуры svg отсчитываются от верхнего левого угла холста svg.
При использовании команды scale координаты фигуры пересчитываются.

При увеличении значения scale(20) координаты центра круга становятся в 20 раз больше, поэтому круг перемещается по диагонали и выходит за край холста SVG.
Чтобы избежать этого эффекта, вместо команды scale вы можете использовать команду для увеличения радиуса круга 

 <style>
svg{
  border: 5px red solid;
  height:600px;
  width:600px;
}
  </style> 
  
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
         viewBox="0 0 600 600" >  

<rect x="295" y="430" width="10" height="100" style="stroke:none; fill: hsl(90, 100%, 47%);"/>
  <circle cx="300" cy="430" r="1"  stroke="black" stroke-width="2" fill="yellow">
   <animate
      attributeName="r"
      from="1"
      to="20"
	  begin="0s"
	  dur="2s"
	  repeatCount="indefinite"
	  fill="freeze"
      />
      
  </circle>
  
  <rect x="0" y="500" width="600" height="100" style="stroke:none; fill:hsl(120, 100%, 30%);"/>
</svg>
...