БЭМ и svg анимация

[webtehnology]

Всем привет! Создали худо бедно страничку сайта со структурой лендинга, и там хотелось использовать анимацию на основе svg. Пока отдельно существует анимация, svg+js, отдельно страница без интеграции в Битрикс сделанная на bem+gulp. Вопрос6 есть ли примеры совмещения уже в bemjson анимации svg

[tadatuta]

Я не знаю готовых примеров и не очень понимаю, что именно вызывает затруднение. Речь о том, чтобы заинлайнить SVG в HTML?

[webtehnology]

Да, как правильно в bemjson вставить тег svg с содержимом

[tadatuta]

1. Любая строка — это валидный BEMJSON, так что в самом простом случае достаточно просто вставить SVG строкой
2. Можно описать в BEMJSON без дополнительных шаблонов:

   {
   tag: 'svg',
   attrs: { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 101.7 84' },
   content: {
       tag: 'path',
       attrs: { d: 'M0 13h23.8v7H0zM0 0h23.8v7H0zm42.7 25.9H0v7h41.1c4.5 0 15 .1 18.9 6.4v-3.9c-1.9-6.2-7.5-9.5-17.3-9.5zm.1 13H0v7h41.1c10 0 16.3.4 18.9 1.8v-3.1c-2-4.9-10.4-5.7-17.2-5.7zm-.1 33H0v-7h41.1c4.5 0 15-.1 18.9-6.4v3.9c-1.9 6.2-7.5 9.5-17.3 9.5zm.1-13H0v-7h41.1c10 0 16.3-.4 18.9-1.8v3.1c-2 4.9-10.4 5.7-17.2 5.7zM70.4 84h31.4v-4.3H71.3c-2.7 0-9.1-.1-11.4-3.8v2.4C61 82 64.4 84 70.4 84zm-.1-7.9h31.4v-4.3H71.3c-6.1 0-9.9-.2-11.4-1.1v1.9c1.2 3 6.3 3.5 10.4 3.5z' }
   }
   }

Если речь про встраивание файлов с файловой системы, то в bemjson.js-файлах можно использовать requre('fs').readFileSync('path/to/file.svg', 'utf8') или borschik include (потребуется добавить вызов борщика в конфиг сборки).

[webtehnology]

Спасибо! Первый вариант, я думаю для совсмем простых файлов, а вот вариант с requre('fs').readFileSync('path/to/file.svg', 'utf8') вроде огонь.

Так же вопрос как добавить в блок с видео атрибут autoplay

{
                                  block:'video',
                                  tag:'video',
                                  //attrs:{'autoplay'},
                                  content:[
                                            {
                                              tag:'source',
                                              attrs:{type:'video/webm', src:'video/home-01.webm'}
                                            },
                                            {
                                              tag:'source',
                                              attrs:{type:'video/webm', src:'video/home-01.mp4'}
                                            },
                                  ]
                                }

[rtemision]

attrs: { autoplay: '' }