Ivan Bogachev

Почему в примере не получается создать снимок

Потому что параметры windowWidth и windowHeight в данном случае задавать не нужно. Уберите их и все заработает.

Если я правильно понял вопрос, то вам нужно сделать репозиторий с названием username.github.io, где username - это ваш ник на гитхабе. Ветка master в нем будет хоститься по адресу вида https://username.github.io/ , без каких-либо дополнений в конце.

Создавайте в каждом своем репозитории ветку "gh-pages". Ее содержимое захостится по адресу https://username.github.io/repository-name/ , вне зависимости от содержимого репозитория с названием "username.github.io".

Таким образом можно в репозитории с названием "username.github.io" иметь личный сайт-визитку, а сами проекты будут жить сами по себе в отдельных репозиториях.

Подскажите как реализовать SVG интерактивную карту без использования обычной картинки. У многих в уроках используют картинку и поверх уже прописывают svg элементы. Я же хочу сделать полностью на svg фон и элементы к нему но вот не знаю как правильно сделать это...

Если взять интерактивную карту, состоящую из картинки и SVG поверх нее (как в этой статье), и убрать картинку, то останется интерактивная карта, состоящая только из SVG. Это вроде как очевидно. Вы можете дорисовывать или раскрашивать элементы в SVG на свой вкус, но принцип работы интерактивной части останется тем же.

Дело в том, что в браузере firefox не работает свойство stroke-dashoffset

Если добавить единицы измерения, то начинает работать:

stroke-dashoffset: calc(440px - (440px * 90) / 100);

Ну строго говоря для решения задачи "на CSS добавить внутри квадрата квадраты меньше и другим цветом" достаточно одного div-элемента (нет нужды добавлять новый элемент на каждый декоративный квадрат).



Но лучше все же уточнить у задавшего вопрос, что значит "не стереть локти" в его понимании.

Очень рекомендую почитать статью про трехмерные презентации товаров на Three.js и разобраться с примером из нее. Там речь в частности идет про загрузку и отображение модели и вращение камеры вокруг нее.

На CSS такое обтекание никак не сделать. Но можно пойти одним весьма хитроподвывернутым способом - продублировать текст и скроллить два блока с контентом одновременно. Как в этом примере, только в одной плоскости, без "перевернутой" трансформации:



Это позволит сделать плавное движение, без рывков при перестроении элементов в DOM-дереве.

Вероятно вам нужно использовать "+":

nav:hover + section
  left: 170px

Давайте посмотрим с разных сторон:

С одной стороны SVG можно нарисовать в графическом редакторе - для замороченных фигур это будет проще, чем пытаться нашаманить их на CSS.

С другой стороны - для простых фигур быстрее может быть их сверстать, чем идти куда-то, открывать редактор, что-то там мышкой кликать, сохранять, копировать и.т.д. Ну а если быстрее - то выбор очевиден.

С третьей стороны может быть соглашение в компании относительно верстки и в нем этот момент может быть описан (скорее всего в пользу SVG). Тогда ничего не придумываем и действуем в соответствии с ним - постоянство в коде очень важно для его поддержки.

С четвертой стороны могут быть такие элементы, что на CSS их не получится сделать кроссбраузерно (с учетом утвержденного списка браузеров). Тогда SVG - наш выбор.

С пятой стороны могут быть анимации у этих элементов. Там нужно смотреть, но иногда вариант с SVG можно будет анимировать как задумано, а вариант на CSS - нет.

С шестой стороны есть вопрос производительности. Часто для имитации одного элемента в SVG нужен десяток-другой элементов, стилизованных с помощью CSS. А если таких элементов на странице сотни (и они превращаются в тысячи), то это начинает влиять на скорость применения стилей к странице.

Итого: иногда CSS - это быстрый и надежный вариант. Но у него есть ограничения, так что на практике SVG используется для этих задач чаще. И да, проверять кроссбраузерность стоит в любом случае.

Без кода сложно говорить, но третий глаз подсказывает, что скорее всего у родительского блока задано свойство transform, filter или will-change. Уберите его и все встанет на свои места.

Вариант, предложенный Максим Ленский не адаптивный и ломается при изменении контента, так что предложу свой.

Треугольники можно было упустить, не в них суть)

Ну ну совсем так. При верстке таких сайтов важно сохранять контекст, в котором был дизайнер (если с ним есть контакт, то лучше все обсудить с ним, но в нашем случае пример в вакууме, так что думаем сами). Конкретные размеры обычно не так важны, как контекст. Здесь его задает равномерная линия между треугольниками и ее важно сохранить. Исходя из этого соображения нужно посчитать, какого размера должны быть треугольники, чтобы все влезало и "было красиво", учитывая, что высоты всех блоков могут меняться. CSS у нас не дает возможности делать вычисления исходя из высоты соседних элементов, так что придется добавить щепотку JS. Ну а дальше - дело техники.



codepen.io/sfi0zy/pen/zYxJNmG.

term does not evaluate to a function taking 2 arguments

a = max(b, c, d);

Стандартная функция max из algorithm не имеет варианта для поиска наибольшего из трех чисел в таком виде. Есть для двух. Если нужно для трех - вам придется написать такую функцию самостоятельно. Ну или загуглите "cpp max of 3 numbers".

У тега script кроме атрибута async есть еще defer. Скрипты с этим атрибутом загружаются все асинхронно, но выполняются потом в том порядке, в котором записаны в html (только они все должны быть отдельными файлами, не инлайновыми скриптами).

Также, если у вас уже есть много скриптов, да еще и месиво из инлайново вставленных и асинхронно подгружаемых, причем все друг от друга зависят и оперативно это не починить, то можно организовать маленькую систему событий, которая будет в себе хранить информацию о том, кто загрузился, а кто - нет (чтобы не получился классический callback-hell). Она должна быть первым скриптом на странице. А загрузившиеся потом скрипты будут ей сообщать "я загрузился", а потом у нее спрашивать "ну что, вон тот уже загрузился?" а она такая "да", и они будут выполняться сразу, или "нет, пока нет", а они такие "ну ок, когда загрузится, скажи". Что-нибудь в таком духе. Также эта штука может помогать при отладке, чтобы понимать, что реально произошло на странице, а что еще нет.

если добавляю 1-2 svg, то все норм, но стоит добавить больше, то во-первых на некоторых изображениях какого-то фига меняется цвет заливки, во-вторых некоторые элементы одного SVG файла не отображаются.

Вангую, что в SVG файлах есть id у масок, фильтров и.т.д. Пока SVG находится в вакууме, как отдельная картинка, все ок. Когда вы вставляете SVG-картинки прямо в страницу - все id попадают как бы в "общую область видимости" страницы. А как мы знаем id на странице не должны дублироваться. Ваша магия очень похожа на то, что что-то где-то продублировалось. Так что вам нужно пройтись по всем SVG и сделать везде уникальные id для элементов, чтобы при вставке в страницу не было нигде дублей.