Можно ли сделать анимацию идеального круга, начинающегося со строки SVG
Можно ли сделать анимацию идеального круга, начинающегося с линии SVG, которая будет расширяться от центра линии и становиться кругом?
Я просматривал об этом, но это не соответствует моим ожиданиям. Либо потому, что я использую неправильные ключевые слова, либо что-то еще.
У меня есть это для моей линии:
<svg height = "210" width = "500">
<line x1 = "150" y1 = "150" x2 = "50" y2 = "150" style = "stroke:rgb(255,0,0); stroke-width:2" />
</svg>
… и процесс, который я ищу, будет таким:
Начните с круга, обрежьте его прямоугольником, анимируйте высоту прямоугольника и y, чтобы расширить клип и открыть круг.
@disinfor при загрузке страницы непрозрачность линии изменится с 0 на 1, и линия станет кругом
@RobertLongson, я не очень хорошо разбираюсь в css, но я попробую .... ваш совет совершенно ясен
Ответы 2
Вы можете сделать это с помощью чистого CSS:
.box {
width:200px;
height:4px;
background:radial-gradient(circle,#000 99px,transparent 100px);
animation:toCircle 5s linear 1s forwards;
}
@keyframes toCircle{
to{
height:200px;
}
}
body {
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
}<div class = "box">
</div>я должен добавить высоту на мои divs ?? Я только что попытался добавить ширину в свой div без высоты.
@BunchOfPaper да, вам нужно добавить высоту, так как вся хитрость заключается в анимации высоты
это правильно, когда я не добавляю свою собственную высоту div, у div есть автоматическая высота?
@BunchOfPaper Я не думаю, потому что вы не сможете анимировать высоту, если не учтете другой трюк, с помощью которого вы можете анимировать высоту обертки вашего div
у меня есть несколько вопросов .... почему я не могу использовать высоту менее 4 пикселей ?? это просто выглядит как коробка, и я хочу, чтобы это было похоже на линию, и как увеличить размер круга ?? я пытаюсь поставить 500 пикселей в ширину, но размер всегда такой же, как 200 пикселей
@BunchOfPaper вам также нужно настроить значение градиента. Я определил круг с радиусом 100 пикселей, поэтому, если вы увеличите ширину, вам также нужно увеличить радиус.
да, но это как бы полукруг от центра
@BunchOfPaper вам также нужно увеличить высоту: jsfiddle.net/0o7nb8xr для круга с радиусом 200 пикселей нам нужна высота не менее 400 пикселей.
о, хорошо, еще кое-что .... в jsfiddle div начинается с одной строки ..... но в моем возвышенном тексте ... тот же код, тот же div, но начинается как прямоугольник ... я хотя не знаю, ты понял мой вопрос :D
Вы можете элегантно преобразовать эллипс SVG из линии в круг:
svg {
background-color: #fff;
}
ellipse {
background:radial-gradient(circle,#000 99px,transparent 100px);
animation:toCircle 1s linear 1s forwards;
}
@keyframes toCircle{
to {
ry:50;
}
}<svg width = "700" height = "500">
<ellipse cx = "100" cy = "100" rx = "50" ry = "0.1"/>
</svg>это круто, но процесс отличается от того, что я ожидал.
Как вы хотите, чтобы анимация происходила? При наведении мыши? При загрузке страницы? Нам нужно немного больше информации.