Преобразование эллипса в SVG - PullRequest
Новая
       44

Преобразование эллипса в SVG

0 голосов
/ 03 марта 2019

Я сейчас программирую в svg для задания, и я не могу понять это правильно.Итак, я хочу эллипс, чтобы он становился все меньше и меньше, но не в cx или cy, а в ry.У меня вопрос, как я мог это сделать.Потому что, когда я пытаюсь использовать инструмент преобразования, он не работает.Как видно из фрагмента ниже, я добавил третье значение.Когда я сделал это, это перестало работать, но я не знаю, как я мог заставить это работать. это иллюстрация, показывающая, чего я хочу достичь

РЕДАКТИРОВАТЬ: я нашел способ заставить его работать!(Я отправил ответ) 

<ellipse id="experi2" cx="610" cy="330" rx="600" ry="250" style= "fill: #404040; stroke:black; stroke-width:10" filter="url(#blurryedge)" />


<animateTransform
 xlink:href="#experi2"
attributeName="transform"
type="translate"
from="610 330 250" <!-- when i added the third value it stopped working --> 
to=" 610 330 20"
begin="0s"
dur="2s"
Repeatcount="freeze"
/>

1 Ответ

0 голосов
/ 03 марта 2019

Вам нужно изменить имя атрибута на 'ry'

Как заставить это работать: 

<svg height="140" width="500">

<ellipse  cx="200" cy="80" rx="100" ry="50" style= "fill: pink; stroke:black; stroke-width:5"  >
<animate attributeName="ry" begin="0s" dur="4s" repeatCount="freeze" from="35%" to="0.1%"/>
</ellipse>
<!-- you just change the attributeName -->

</svg>
(Если у вас есть какие-либо вопросы по этому поводу, не стесняйтесь их задавать)
...