WedX - журнал о программировании и компьютерных науках

Изменить начальную точку анимации обводки вокруг многоугольника?

У меня есть многоугольник в форме шестиугольника с обводкой вокруг него. Я хочу анимировать этот штрих, что я и сделал, но мне бы хотелось, чтобы он начинался в другом месте полигона.

Это CSS, который у меня есть прямо сейчас, и он работает, я просто хочу изменить, где начинается анимация.

.outline1 {
    fill: none; 
    stroke: #0d72b9;
    stroke-miterlimit: 10;
    stroke-width: 3px;
}

g.icon .outline1 {
    stroke-dasharray: 808; 
    stroke-dashoffset:808; 
    transition:all 300ms ease-in-out; 
    fill:transparent;
 }

g.icon:hover .outline1{
    stroke-dashoffset:0; 
    cursor: pointer;
}

это свг

<svg id="Layer_1" data-name="Layer 1" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 764.87 535.94">

    <g class="regional icon">
       <polygon class="cls-3 outline1" points="113.52 134.89 229.99 67.64 346.47 134.89 346.47 269.38 229.99 336.62 113.52 269.38 113.52 134.89"/>
    </g>

</svg>

Анимация начинается в верхнем левом углу, но я бы хотел, чтобы она начиналась в левом нижнем углу.

svg css css-animations
03.05.2016

Ответы:


1

Вам просто нужно изменить начальную точку.

Вот это правильный способ сделать это.

.outline1 {
    fill: none; 
    stroke: #0d72b9;
    stroke-miterlimit: 10;
    stroke-width: 3px;
}

g.icon .outline1 {
    stroke-dasharray: 808; 
    stroke-dashoffset:808; 
    transition:all 300ms ease-in-out; 
    fill:transparent;
 }

g.icon:hover .outline1{
    stroke-dashoffset:0; 
    cursor: pointer;
}
<svg id="Layer_1" data-name="Layer 1" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 764.87 535.94">

    <g class="regional icon">
       <polygon class="cls-3 outline1" points="113.52 202.135 113.52 134.89 229.99 67.64 346.47 134.89 346.47 269.38 229.99 336.62 113.52 269.38"/>
    </g>

</svg>

03.05.2016
  • Итак, похоже, что он должен начинаться с одной из точек? Я бы хотел, чтобы он начинался в середине одного из сегментов штриха, если это возможно. Извините, я должен был быть более ясным, не ожидал, что это будет работать так, как вы описали. 04.05.2016
  • @Dustin переходит к этому, я также изменил ответ 04.05.2016
  • Спасибо. Но как узнать, какое число там разместить и где его разместить? Я вижу, вы в основном добавили точку, но вы сделали это в иллюстраторе или другим способом? 04.05.2016
  • @Dustin В основном это простая математика - я просто добавил два числа, а затем разделил их на 2 (a + b/2). В points у нас есть числовые значения, 113.52 202.135 113.52 134.89 229.99 67.64 346.47 134.89 346.47 269.38 229.99 336.62 113.52 269.38. Каждая точка имеет две координаты x и y. Итак, у нас есть 6 точек и 14 значений координат, по которым проходит наша граница. Вот почему у нас есть два одинаковых свойства x и y в начале и в конце нашего значения points. 04.05.2016

    • 2

    Обводка начинается там, где начинается путь/многоугольник... измените начальную точку.

    svg {
  height: 250px;
  display: block;
  margin: 1em auto;
  border: 1px solid grey;
}
.outline1 {
  fill: none;
  stroke: #0d72b9;
  stroke-miterlimit: 10;
  stroke-width: 10px;
}
g.icon .outline1 {
  stroke-dasharray: 808;
  stroke-dashoffset: 808;
  transition: all 1000ms ease-in-out;
  fill: pink;
}
g.icon:hover .outline1 {
  stroke-dashoffset: 0;
  cursor: pointer;
}
    <svg id="Layer_1" data-name="Layer 1" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 764.87 535.94">

  <g class="regional icon">
    <polygon class="cls-3 outline1" points=" 113.52 269.38 113.52 134.89 229.99 67.64 346.47 134.89 346.47 269.38 229.99 336.62 113.52 269.38 " />
  </g>

</svg>

    03.05.2016

    3

    Для симметричных фигур гораздо проще добавить CCS, которые непосредственно вращают фигуру.

    .outline1 {
    fill: none; 
    stroke: #0d72b9;
    stroke-miterlimit: 10;
    stroke-width: 3px;
}

g.icon .outline1 {
    stroke-dasharray: 808; 
    stroke-dashoffset:808; 
    transition:all 300ms ease-in-out; 
    fill:transparent;
 }

g.icon:hover .outline1{
    stroke-dashoffset:0; 
    cursor: pointer;
}
.outline1 {
    -ms-transform: rotate(60deg); /* IE 9 */
    -ms-transform-origin: 50% 50%; /* IE 9 */
    -webkit-transform: rotate(60deg); /* Chrome, Safari, Opera */
    -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
    transform: rotate(60deg);
    transform-origin: 50% 50%;
}
    <svg id="Layer_1" data-name="Layer 1" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 764.87 535.94">
  
    <g class="regional icon">
       <polygon class="cls-3 outline1" points="113.52 134.89 229.99 67.64 346.47 134.89 346.47 269.38 229.99 336.62 113.52 269.38 113.52 134.89"/>
    </g>
  

</svg>

    04.05.2016
    Новые материалы
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..
    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..
    Для любых предложений по сайту: [email protected]