Ivan Bogachev

У Safari есть проблемы с отображением SVG-картинок внутри flex-контейнеров. Стандартное решение - сделать непосредственным родительским элементам этих картинок display:block или inline-block.

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

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

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

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

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

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

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

Вы можете в графическом редакторе переместить и масштабировать всю свою карту в SVG так, чтобы она была грубо говоря не от 0 до 100 (или какая она у вас там) по горизонтали, а от 19 до 169 (вроде бы, не силен в географии). И по вертикали так же подвинуть. И исходить из соображений, что координаты X/Y в SVG буквально равны нашим обычным координатам по широте и долготе. На восток и север - в плюс, на запад и юг - в минус. А перемещение на экране и масштабирование можно сделать с помощью атрибута viewbox, меняя его по ходу дела. Если вы руками рисуете, то таким образом можно получить точность в 1/4 градуса без умственных усилий, просто представив циферблат (0'/15'/30'/45' -> 0/.25/.50/.75), так что думаю, что для ваших задач, где точность не столь важна, это вполне подойдет.

Вы много раз используете такие штуки, как use и clip-path, указывая там id елементов. Но сами id на странице не уникальны. Вот и ломается все. Используйте уникальные id для элементов.

Явно задайте элементу svg размер (width, height) в CSS. Проблема связана с тем, что браузеры могут по-разному определять размер элемента svg, когда он находится во flex-контейнере.

А почему бы не использовать обычную feDropShadow?

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="0" dy="4" stdDeviation="2" flood-color="grey" />
    </filter>
  </defs>
  <polygon points="30.1,84.5 10.2,50 30.1,15.5 69.9,15.5 89.8,50 69.9,84.5"
           filter="url(#shadow)" fill="hsl(156,80%,50%)"></polygon>
</svg>

Цифры по умолчанию заливаются (свойство fill) черным цветом - вы это и видите.

Перелопалит весь гугл - пусто.

Посмотрите примеры из этой статьи. К задаче так и напрашиваются SVG-маски.

Сама линия делается по вот такому принципу с помощью SVG:

Появление иконок - так же. Заливка надписей с помощью линии - это прямо задача для SVG-масок. Дальше к этому прикручивается кастомный скролл, поскольку сайт нестандартный - проще руками его сделать, чем пытаться доделать какое-то стороннее решение. Плюс немного CSS-анимаций для всего остального. Дальше много абсолютного позиционирования чтобы это все подогнать. Как говорится, ябзаверстал.

Попробуйте добавить preserveAspectRatio="xMidYMid slice" к SVG с этими полигонами.

хотя бы в какую сторону смотреть?

Смотрите в сторону создания двух слоев с одним и тем же содержимым. К верхнему применяется размытие и маска из градиента. А дальше нужно играть с параметрами до достижения желаемого результата.

Можно и в обратную сторону - нижний размывать, а к верхнему применять маску, только противоположных цветов.

Путей два:

• Не морочьте себе голову, оставьте только один контур у этих объектов (уберите все, что есть после буквы M в атрибуте d у #rocket-window и #rocket-outline) и поместите #rocket-window после #rocket-outline в коде.
  
• Используйте fill-rule="nonzero" у этих объектов, но убедитесь, что оба контура (внутренний и внешний) нарисованы в одну сторону (по часовой или против).
  

Слой номер раз: SVG картинка со схемой, вставляете ее в код страницы. Областям задаете какой-нибудь класс, чтобы селекторы были более понятными.

Слой номер два: Плашки с текстом. Их удобно не в картинку пихать, а верстать на html/css и располагать поверх картинки с помощью абсолютного позиционирования или трансформаций. Если сообразить для картинки viewbox='0 0 100 100', то даже считать ничего не нужно будет.

Дальше на css на :hover/:focus по областям показываете плашки с текстом. Можно это на :nth-child построить или еще как-нибудь - смотрите, что будет удобнее. Ну и самим областям меняете fill на оранжевый.

P.S.: Можно еще сделать, чтобы в плашках как бы вода с волнами наливалась при наведении мыши, но это уже совсем другая история...

Тоже не поверил, что в FF могут быть проблемы с маской. Уже подумал, что вы баг в браузере нашли... Но все оказалось куда проще - в ответе на SO какая-то жесть творится с размерами, я ее немного поправил и все заработало:

<svg viewbox='0 0 100 100'>
    <defs>
        <mask id='mask'>
            <rect x='0' y='0' width='100' height='100' fill='rgba(255,255,255,0.5)' />
            <circle r='50' cx='50' cy='50' fill='#000' />
        </mask>
    </defs>
    <image xlink:href='....' x='0' y='0' width='100'height='100' />
    <rect x='0' y='0' width='100' height='100' fill='white' mask='url(#mask)' />
</svg>

С самой маской проблем нет.
CodePen