Как стать автором
Обновить

Комментарии 57

В связи с чем возникает законный вопрос: что будет, если кто-нибудь догадается встроить в SVG криптомайнер и начнёт постить такую картинку везде в комментариях?

Она по сигнатурам попадет в фильтры uBlock.
В связи с чем? Статья не о том, что SVG поддерживает JavaScript. Или, вы думаете, автор сделал открытие?
Майнеры сделали открытие)
НЛО прилетело и опубликовало эту надпись здесь
Скрипт в этих часах используется только для инициализации. Вся анимация работает без скриптов.
Мы не проводили тесты на iPhone.
В iOS 11 в сафари работает.
А в текущей вкладке показывает ерунду
Можете заскринить?
И что же не так? На текущей вкладке запускается с нуля (с 12и), на новой вкладке — системное время.
как и календарь в статье
Не ерунду, а часы, которые правильно показывают время только дважды в сутки (если открыть их в соответствующие моменты).
В том-то и дело, что они движутся, просто не инициализируются текущим временем.
Движутся они не скриптом. Там transform используется
(https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform)

Ну хоть секундомер в картинке работает.

Откройте диспетчер задач и посмотрите как кушает проц
я и так в хроме сижу… 4 гб оперативы — используется 104к КБ
Мопед не мой, я лишь… :)
Все конечно интересненько, только память жрёт
Там случайно не встроен майнер?
image

Это анимация жрёт. Её коряво реализовали в браузере. Даже если в картинке ничего не меняется она перерисовывается полностью.

не неполностью, там три момента анимации — для каждой стрелки, можно по частям убирать и смотреть на проц. это относится и к мозиле и к хрому.

Это да. Но когда они встроены через тег img а в этом случае картинка перересовывается полностью постоянно. Даже шаговая анимация в одну минуту (<animateTransform calcMode="discrete" dur="1min" type="rotate" fill="freeze" by="6" />) перерисовывается несколько раз в секунду хотя в этом нет необходимости.

как это можно проверить/увидеть?
если это без тега img — то нагрузка на проц будет меньше?
В хроме можно залезть во внутрь svg, а в мозиле — нет.

В Firefox есть кнопка "Подсветить прорисованную область" в панели иструментов консоли. Её надо добавить в "Настройки инструментов" -> "Дополнительные кнопки инструментов" -> "Подсветить прорисованную область".
В хроме аналог флажок "Enable paint flashing" на вкладке Rendering в консоли.
Только осторожно с этим. Зрелище не для эпилептиков. В хроме это нежнее реализовано.

проверил, перерисовывает не всю картинку, а только прямоугольник, в который вписывается стрелка(и)

В оригинальном svg или встроеном через тег img?

если смотреть на этой странице — то вся картинка, если в новой вкладке — то отдельными примоугольниками

Вот об этом и речь.

Вот пример:


Здесь спрятан квадрат который грузит процессор

image


Этот квадрат не делает ничего кроме того что жрёт процессорное время.


Если открыть этот квадрат и включить режим отображения прорисовки то можно увидеть он перерисовывается много раз в секунду несмотря на то что в картинке ничего не меняется.


Как включить этот режим

В Firefox есть кнопка "Подсветить прорисованную область" в панели инструментов консоли. Её надо добавить в "Настройки инструментов" -> "Дополнительные кнопки инструментов" -> "Подсветить прорисованную область".
В хроме аналог флажок "Enable paint flashing" на вкладке Rendering в консоли.
Только осторожно с этим. Зрелище не для эпилептиков. В хроме это нежнее реализовано.


Как он это делает?


<animateTransform fill="freeze" repeatCount="indefinite" attributeName="transform" by="0" calcMode="discrete" dur="1000000000000000000000000000000h" type="rotate"/>

Разберём по полочкам:


  1. calcMode="discrete" — выполнить без переходов.
    В этом режиме отключается переход и анимация в определённый момент выполняется мгновенно меняя одно значение на другое.
  2. dur="1000000000000000000000000000000h" — это время анимации.
    Дофига часов которое анимация будет работать. Точнее просто жрать процессор ничего не меняя в картинке. В режиме discrete через половину этого времени должна быть мгновенно изменено значение.
  3. type="rotate" — это анимация должна повернуть фигуру
  4. by="0" — на 0 градусов.
    То есть опять ничего не изменится даже в тот момент когда должно поменяться значение.

Для лучшего понимания как работает режим discrete:


Другой квадрат который грузит процессор

image


Тут я уже задал значения при которых квадрат меняет поворот. Но он также постоянно перерисовывается даже когда не движется.


Его анимация:


<animateTransform fill="freeze" repeatCount="indefinite" attributeName="transform" by="45" calcMode="discrete" dur="5s" type="rotate"/>

  1. repeatCount="indefinite" — повторять бесконечно
  2. dur="5s" — длительность анимации 5 секунд
  3. calcMode="discrete" — выполнить смену значения мгновенно без переходов
  4. type="rotate" — повернуть
  5. by="45" — на 45 градусов

И никаких скриптов и майнеров не надо.

Я поэкспериментировал и сделал свой SVG секундомер в котором анимация включается каждую секунду на 0.001 секунды.
image
image

А если заменить
var locale = "en-gb";

на
var locale = undefined;

то получим то же самое в текущей локали.
НЛО прилетело и опубликовало эту надпись здесь

Скрипты не работают, если svg показывается как картинка на странице.


Вся статья сводится к трем тезисам:

  • SVG поддерживает Javascript
  • new Date()
  • evt.target.ownerDocument.createTextNode()
SVG поддерживает Javascript

А не дыра ли это?

С чего вдруг? В img скрипты не работают. Они работают только если svg встроен напрямую в html или открыт в отдельном окне.

открыт в отдельном окне.

Заставить пользователя открыть ссылку в новом окне — раз плюнуть. И при этом выполнится неподконтрольный скрипт в домене сервера, на который было загружено изображение.

НЛО прилетело и опубликовало эту надпись здесь
На iPhone тоже работает.
>>Этот SVG всегда показывает сегодняшнюю дату
Нет, он показывает дату открытия, завтра соврет.

Видмо имеется ввиду если его встроить напрямую в страницу на не тегом img.

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

Почему? Я вижу уже 7

И завтра увидите
Имеется ввиду, что скрипт не будет перезапускаться, когда будет пройдет день, и на SVG будет старая дата
Мы не проводили тесты на iPhone или более экзотических устройствах.

С каких это пор айфон — хоть сколько-нибудь экзотическое устройство?)
А вне браузера он и не должен исполняться, верно? По крайней мере в eog скрипт не отрабатывает и картинка показывает дефолтное 29 февраля.
Зарегистрируйтесь на Хабре , чтобы оставить комментарий

Публикации

Истории