У меня есть файл *.jpg карты России с Википедии и svg файл границы России
но при скачивании этого файла изображения городов отсутствует.
Но вопрос не в этом. Хочется сделать векторное изображение карты России с интерактивным появлением на карте городов с аэропортами и городов с морскими портами.
Анимация появления на карте городов может быть реализована с любой техникой css, smil, canwas, Web Animations.
Отдам предпочтение ответам без использования анимации opacity
, необходима динамика, движение.
Для размещения на карте символов аэропортов с городами вместо привычного использования иконок можно использовать Юникоды.
Преимущества этого метода:
svg
и HTML
форматы. В svg достаточно добавить код символа в тег <text>
<svg width="100%" height="100%" viewBox="0 0 50 50">
<text x="10" y="10" font-size="12" fill="purple">✈ </text>
</svg>
Анимация не представляет проблем, так как это по сути текст, а в SVG есть сто и один способ анимировать текст.
Простое позиционирование, которое можно осуществлять, как измененим
размера шрифта, так и дополнительными параметрами тега <tspan dx="x"
dy="y">
<svg width="100%" height="100%" viewBox="0 0 100 100">
<text fill="purple" x="14" y="20" font-size="12" dx="0" >
Новосибирск <tspan dx="-43" dy="-9" font-size="14" fill="teal" >✈</tspan>
</text>
<text fill="purple" x="14" y="40" font-size="10" dx="0" >
Мурманск <tspan dx="0" dy="0" font-size="14" fill="teal" >⛵</tspan>
</text>
</svg>
Для анимации будем использовать атрибуты x
и y
тега <text>
, которые задают координаты первого символа текста.
Изменяя их, мы создаем тем самым анимацию движения текста вместе с символами юникода.
Задавая отрицательные значения - прячем текст. Увеличивая x
и y
анимируем движение названия города к месту расположения на карте.
Команда реализующая движение названия города
<text fill="purple" x="-400" y="-200" font-size="12" dx="0" >
Москва <tspan dx="-38" dy="16" font-size="18" fill="teal">✈</tspan>
<animate attributeName="x" values="-400;59" begin="animFill.end+1s;" dur="0.5s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1"/>
<animate id="Moskva_Y" attributeName="y" values="-200;245" begin="animFill.end+1s" dur="0.5s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1" />
Ниже полный код анимации:
<meta charset="utf-8">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600" viewBox="-20 110 500 500" >
<path id="RU" title="Russia" transform="translate(-525 -10)" stroke-dasharray="0" stroke-dashoffset="0" stroke-width="1" stroke="grey" fill="#94CDB2" class="land" d="M1008.27,215.75l-2.78,2.97l-4.6,0.7l-0.07,6.46l-1.12,1.35l-2.63,-0.19l-2.14,-2.26l-3.73,-1.92l-0.63,-2.89l-2.85,-1.1l-3.19,0.87l-1.52,-2.37l0.61,-2.55l-3.36,1.64l1.26,3.19l-1.59,2.83l-0.02,0.04l-3.6,2.89l-3.63,-0.48l2.53,3.44l1.67,5.2l1.29,1.67l0.33,2.53l-0.72,1.6l-5.23,-1.32l-7.84,4.51l-2.49,0.69l-4.29,4.1l-4.07,3.5l-1.03,2.55l-4.01,-3.9l-7.31,4.42l-1.28,-2.08l-2.7,2.39l-3.75,-0.76l-0.9,3.63l-3.36,5.22l0.1,2.14l3.19,1.17l-0.38,7.46l-2.6,0.19l-1.2,4.15l1.17,2.1l-4.9,2.47l-0.97,5.4l-4.18,1.14l-0.84,4.66l-4.04,4.18l-1.04,-3.08l-1.2,-6.69l-1.56,-10.65l1.35,-6.95l2.37,-3.07l0.15,-2.44l4.36,-1.18l5.01,-6.78l4.83,-5.73l5.04,-4.57l2.25,-8.37l-3.41,0.51l-1.68,4.92l-7.11,6.36l-2.3,-7.14l-7.24,2l-7.02,9.56l2.32,3.38l-6.26,1.42l-4.33,0.56l0.2,-3.95l-4.36,-0.84l-3.47,2.7l-8.57,-0.94l-9.22,1.62l-9.08,10.33l-10.75,11.78l4.42,0.61l1.38,3l2.72,1.05l1.79,-2.38l3.08,0.31l4.05,5.19l0.09,3.92l-2.19,4.51l-0.24,5.27l-1.26,6.85l-4.23,6.01l-0.94,2.82l-3.81,4.66l-3.78,4.53l-1.81,2.28l-3.74,2.25l-1.77,0.05l-1.76,-1.86l-3.76,2.79l-0.44,1.26l-0.39,-0.66l-0.02,-1.93l1.43,-0.1l0.4,-4.55l-0.74,-3.36l2.41,-1.4l3.4,0.7l1.89,-3.89l0.96,-4.46l1.09,-1.51l1.47,-3.76l-4.63,1.24l-2.43,1.65l-4.26,0l-1.13,-3.95l-3.32,-3.03l-4.88,-1.38l-1.04,-4.28l-0.98,-2.73l-1.05,-1.94l-1.73,-4.61l-2.46,-1.71l-4.2,-1.39l-3.72,0.13l-3.48,0.84l-2.32,2.31l1.54,1.1l0.04,2.52l-1.56,1.45l-2.53,4.72l0.03,1.93l-3.95,2.74l-3.37,-1.63l-3.35,0.36l-1.47,-1.46l-1.68,-0.47l-4.11,3.06l-3.69,0.71l-2.58,1.06l-3.53,-0.7l-2.6,0.04l-1.7,-2.2l-2.75,-2.09l-2.81,-0.58l-3.55,0.57l-2.65,0.81l-3.98,-1.84l-0.53,-3.32l-3.3,-1.15l-2.54,-0.53l-3.14,-1.87l-2.9,4.66l1.14,2.6l-2.73,3.03l-4.05,-1.09l-2.8,-0.16l-1.87,-2.04l-2.92,-0.06l-2.44,-1.35l-4.26,2.07l-5.35,3.74l-2.96,0.74l-1.1,0.35l-1.49,-2.63l-3.61,0.58l-1.19,-1.84l-1.96,-0.85l-1.35,-2.55l-1.55,-0.8l-4.03,1.14l-3.86,-2.57l-1.49,2.33l-6.27,-11.58l-3.58,-3.66l1.03,-1.5l-7.03,4.49l-2.69,0.27l0.23,-2.58l-3.6,-1.63l-2.93,1.17l-0.88,-5.01l-5.04,-1.06l-2.52,2.03l-7.02,1.79l-1.37,1.19l-10.49,1.66l-1.29,1.62l2.02,3.21l-2.69,1.2l0.53,1.25l-2.69,2.22l4.54,3.1l-0.7,2.11l-3.94,-0.19l-0.81,1.31l-3.59,-2.29l-4.45,0.09l-2.98,1.87l-3.32,-1.79l-6.18,-3.1l-4.38,0.12l-5.79,4.85l-0.35,3.19l-2.88,-2.53l-2.24,4.77l0.82,0.87l-1.62,3.21l2.38,2.84l2.08,-0.12l1.79,2.76l-0.28,2.1l1.42,0.66l-1.28,2.39l-2.72,0.66l-2.79,4.09l2.55,3.7l-0.28,2.59l3.06,4.46l-1.67,1.51l-0.48,0.95l-1.24,-0.25l-1.93,-2.27l-0.79,-0.13l-1.76,-0.87l-0.86,-1.55l-2.62,-0.79l-1.7,0.6l-0.49,-0.71l-3.82,-1.83l-4.13,-0.62l-2.37,-0.66l-0.34,0.45l-3.57,-3.27l-3.2,-1.48l-2.42,-2.32l2.04,-0.64l2.33,-3.35l-1.57,-1.6l4.13,-1.67l-0.07,-0.9l-2.52,0.66l0.09,-1.83l1.45,-1.16l2.71,-0.31l0.44,-1.4l-0.62,-2.33l1.14,-2.23l-0.03,-1.26l-4.13,-1.41l-1.64,0.05l-1.73,-2.04l-2.15,0.69l-3.56,-1.54l0.06,-0.87l-1,-1.93l-2.24,-0.22l-0.23,-1.39l0.7,-0.91l-1.79,-2.58l-2.91,0.44l-0.85,-0.23l-0.71,1.04l-1.05,-0.18l-0.69,-2.94l-0.66,-1.54l0.54,-0.44l2.26,0.16l1.09,-1.02l-0.81,-1.25l-1.89,-0.83l0.17,-0.86l-1.14,-0.87l-1.76,-3.15l0.6,-1.31l-0.27,-2.31l-2.74,-1.18l-1.47,0.59l-0.4,-1.24l-2.95,-1.26l-0.9,-2.99l-0.24,-2.49l-1.35,-1.19l1.2,-1.66l-0.83,-4.96l2,-3.13l-0.42,-0.96l3.19,-3.07l-2.94,-2.68l6,-7.41l2.6,-3.45l1.05,-3.1l-4.15,-4.26l1.15,-4.15l-2.52,-4.85l1.89,-5.76l-3.26,-7.96l2.59,-5.48l-4.29,-4.99l0.41,-5.4l2.26,-0.72l4.77,-3.19l2.89,-2.81l4.61,4.86l7.68,1.88l10.59,8.65l2.15,3.51l0.19,4.8l-3.11,3.69l-4.58,1.85l-12.52,-5.31l-2.06,0.9l4.57,5.1l0.18,3.15l0.18,6.75l3.61,1.97l2.19,1.66l0.36,-3.11l-1.69,-2.8l1.78,-2.51l6.78,4.1l2.36,-1.59l-1.89,-4.88l6.53,-6.74l2.59,0.4l2.62,2.43l1.63,-4.81l-2.34,-4.28l1.37,-4.41l-2.06,-4.69l7.84,2.44l1.6,4.18l-3.55,0.91l0.02,4.04l2.21,2.44l4.33,-1.54l0.69,-4.61l5.86,-3.52l9.79,-6.54l2.11,0.38l-2.76,4.64l3.48,0.78l2.01,-2.58l5.25,-0.21l4.16,-3.19l3.2,4.62l3.19,-5.09l-2.94,-4.58l1.46,-2.66l8.28,2.44l3.88,2.49l10.16,8.8l1.88,-3.97l-2.85,-4.11l-0.08,-1.68l-3.38,-0.78l0.92,-3.83l-1.5,-6.49l-0.08,-2.74l5.17,-7.99l1.84,-8.42l2.08,-1.88l7.42,2.51l0.58,5.18l-2.66,7.28l1.74,2.78l0.9,5.94l-0.64,11.07l3.09,4.73l-1.2,5.01l-5.49,10.2l3.21,1.02l1.12,-2.51l3.08,-1.82l0.74,-3.55l2.43,-3.49l-1.63,-4.26l1.31,-5.08l-3.07,-0.64l-0.67,-4.42l2.24,-8.28l-3.64,-7.03l5.02,-6.04l-0.65,-6.62l1.4,-0.22l1.47,5.19l-1.11,8.67l3,1.59l-1.28,-6.37l4.69,-3.58l5.82,-0.49l5.18,5.18l-2.49,-7.62l-0.28,-10.28l4.88,-2.02l6.74,0.44l6.08,-1.32l-2.28,-5.38l3.25,-7.02l3.22,-0.3l5.45,-5.51l7.4,-1.51l0.94,-3.15l7.36,-1.08l2.29,2.61l6.29,-6.24l5.15,0.2l0.77,-5.24l2.68,-5.33l6.62,-5.31l4.81,4.21l-3.82,3.13l6.35,1.92l0.76,6.03l2.56,-2.94l8.2,0.16l6.32,5.84l2.25,4.35l-0.7,5.85l-3.1,3.24l-7.37,5.92l-2.11,3.08l3.48,1.43l4.15,2.55l2.52,-1.91l1.43,6.39l1.23,-2.56l4.48,-1.57l9,1.65l0.68,4.58l11.72,1.43l0.16,-7.47l5.95,1.74l4.48,-0.05l4.53,5.14l1.29,6.04l-1.66,3.84l3.52,6.98l4.41,3.49l2.71,-9.18l4.5,4l4.78,-2.38l5.43,2.72l2.07,-2.47l4.59,1.24l-2.02,-8.4l3.7,-4.07l25.32,6.06l2.39,5.35l7.34,6.65l11.32,-1.62l5.58,1.41l2.33,3.5l-0.34,6.02l3.45,2.29l3.75,-1.64l4.97,-0.21l5.29,1.57l5.31,-0.89l4.88,6.99l3.47,-2.48l-2.27,-5.07l1.25,-3.62l8.95,2.29l5.83,-0.49l8.06,3.84l3.92,3.44l6.87,5.86l7.35,7.34l-0.24,4.44l1.89,1.74l-0.65,-5.15l7.61,1.07L1008.27,215.75zM880.84,306.25l-2.82,-7.68l-1.16,-4.51l0.07,-4.5l-0.97,-4.5l-0.73,-3.15l-1.25,0.67l1.11,2.21l-2.59,2.17l-0.25,6.3l1.64,4.41l-0.12,5.85l-0.65,3.24l0.32,4.54l-0.31,4.01l0.52,3.4l1.84,-3.13l2.13,2.44l0.08,-2.84l-2.73,-4.23l1.72,-6.11L880.84,306.25zM537.82,278.77l-2.94,-0.86l-3.87,1.58l-0.64,2.13l3.45,0.55l5.16,-0.07l-0.22,-1.23l0.3,-1.33L537.82,278.77zM979.95,178.65l3.66,-0.52l2.89,-2.06l0.24,-1.19l-4.06,-2.51l-2.38,-0.02l-0.36,0.37l-3.57,3.64l0.5,2.73L979.95,178.65zM870.07,151.56l-2.66,3.92l0.49,0.52l5.75,1.08l4.25,-0.07l-0.34,-2.57l-3.98,-3.81L870.07,151.56zM894.64,142.03l3.24,-4.25l-7.04,-2.88l-5.23,-1.68l-0.67,3.59l5.21,4.27L894.64,142.03zM869.51,140.34l10.33,0.3l2.21,-8.14l-10.13,-6.07l-7.4,-0.51l-3.7,2.18l-1.51,7.75l5.55,7.01L869.51,140.34zM622.39,166.28l-2.87,1.96l0.41,4.83l5.08,2.35l0.74,3.82l9.16,1.1l1.66,-0.74l-5.36,-7.11l-0.57,-7.52l4.39,-9.14l4.18,-9.82l8.71,-10.17l8.56,-5.34l9.93,-5.74l1.88,-3.71l-1.95,-4.83l-5.46,1.6l-4.8,4.49l-9.33,2.22l-9.26,7.41l-6.27,5.85l0.76,4.87l-6.71,9.03l2.58,1.22l-5.56,8.27L622.39,166.28zM769.87,98.34l0.83,-5.72l-7.11,-8.34l-2.11,-0.98l-2.3,1.7l-5.12,18.6L769.87,98.34zM605.64,69.03l3.04,3.88l3.28,-2.69l0.39,-2.72l2.52,-1.27l3.76,-2.23l1.08,-2.62l-4.16,-3.85l-2.64,2.9l-1.61,4.12l-0.57,-4.65l-4.26,0.21L601,63.25l6.24,0.52L605.64,69.03zM736.89,82.07l4.65,5.73l7.81,4.2l6.12,-1.8l0.69,-13.62l-6.46,-16.04l-5.45,-9.02l-6.07,4.11l-7.28,11.83l3.83,3.27L736.89,82.07z"/>
<g font-family="serif" >
<text transform="scale(0 0)" fill="#AFCD72" x="165" y="220" font-size="36" dx="0" > РОССИЯ
<animateTransform id="animScale" attributeName="transform" type="scale" values="0 0;1 1" begin="0.5s" dur="2.3s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1"/>
<animate id="animFill" attributeName="fill" from="#AFCD72" to="purple" begin="0.5s" dur="2.3s" fill="freeze"/>
</text>
<text fill="purple" x="-400" y="-200" font-size="12" dx="0" >
Москва <tspan dx="-38" dy="16" font-size="18" fill="teal">✈</tspan>
<animate attributeName="x" values="-400;59" begin="animFill.end+1s;" dur="0.5s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1"/>
<animate id="Moskva_Y" attributeName="y" values="-200;245" begin="animFill.end+1s" dur="0.5s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1" />
</text>
<text fill="#54009D" x="-400" y="267" font-size="11" dx="0" >
Сочи <tspan dx="-20" dy="16" font-size="16" fill="#54009D" >✈</tspan>
<animate id="sochy_X" attributeName="x" values="-400;33" begin="Moskva_Y.end+0.2s" dur="0.5s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1"/>
</text>
<text fill="purple" x="-400" y="210" font-size="11" dx="20" dy="10" >
<tspan >Санкт-Петербург </tspan><tspan dx="-55" dy="15" font-size="16" fill="#54009D">✈</tspan>
<animate attributeName="x" values="-400;59" begin="sochy_X.end+0.1s" dur="0.5s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1"/>
<animate id="Sankt_X" attributeName="x" values="-100;0" begin="sochy_X.end+0.1s" dur="0.5s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1" />
</text>
<text fill="#54009D" x="-400" y="188" font-size="11" dx="80" dy="5" >
<tspan >Архангельск </tspan><tspan dx="-45" dy="15" font-size="18" fill="#54009D">⛵</tspan>
<animate id="Arxan_X" attributeName="x" values="-400;-35" begin="Sankt_X.end" dur="0.8s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1"/>
<animate id="Arxan_Y" attributeName="y" values="0;188" begin="Sankt_X.end" dur="0.8s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1" />
</text>
<text fill="#54009D" x="-45" y="-100" font-size="11" dx="75" dy="0" >
<tspan >Мурманск </tspan><tspan dx="-45" dy="15" font-size="18" fill="#54009D">⛵</tspan>
<animate id="Murmansk_Y" attributeName="y" values="-100;165" begin="Arxan_X.end+0.1s" dur="0.3s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1"/>
</text>
<text fill="#54009D" x="-400" y="235" font-size="11" dx="0" >
Екатеринбург <tspan dx="-33" dy="15" font-size="16" fill="#54009D" >✈</tspan>
<animate id="Ekb_X" attributeName="x" values="-400;97" begin="Sankt_X.end" dur="0.5s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1"/>
</text>
<text fill="#54009D" x="-400" y="-270" font-size="12" dx="0" >
Новосибирск <tspan dx="-33" dy="14" font-size="16" fill="teal" >✈</tspan>
<animate id="Nsib_X" attributeName="x" values="-400;147" begin="Arxan_Y.end+0.1s" dur="0.4s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1"/>
<animate id="Nsib_Y" attributeName="y" values="-400;270" begin="Arxan_Y.end+0.1s" dur="0.4s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1"/>
</text>
<text fill="#54009D" x="1000" y="-400" font-size="11" dx="0" >
Красноярск <tspan dx="-33" dy="14" font-size="16" fill="#54009D" >✈</tspan>
<animate id="Ksk_X" attributeName="x" values="1000;237" begin="Nsib_Y.end" dur="0.5s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1"/>
<animate id="Ksk_Y" attributeName="y" values="-400;270" begin="Nsib_Y.end" dur="0.5s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1"/>
</text>
<text fill="#54009D" x="800" y="-400" font-size="12" dx="0" dy="4" >
Хабаровск <tspan dx="-33" dy="14" font-size="16" fill="#54009D" >✈</tspan>
<animate id="Xabarovsk_X" attributeName="x" values="800;312" begin="Ksk_Y.end+0.2s" dur="0.5s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1"/>
<animate id="Xabarovsk_Y" attributeName="y" values="-400;260" begin="Ksk_Y.end+0.2s" dur="0.5s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1"/>
</text>
<text fill="#54009D" x="-400" y="-400" font-size="12" dx="0" dy="5" >
<tspan >Владивосток </tspan><tspan dx="-45" dy="15" font-size="18" fill="#54009D">⛵</tspan>
<animate id="Vladik_X" attributeName="x" values="-400;290" begin="Ksk_Y.end" dur="0.5s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1"/>
<animate id="Vladik_Y" attributeName="y" values="-400;300" begin="Ksk_Y.end+0.2s" dur="0.5s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1"/>
</text>
<text fill="#54009D" x="-450" y="400" font-size="11" dx="0" >
Якутск <tspan dx="-33" dy="14" font-size="16" fill="#54009D" >✈</tspan>
<animate id="Yakutsk_X" attributeName="x" values="-450;320" begin="Vladik_Y.end+0.1s" dur="0.5s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1"/>
<animate id="Yakutsk_Y" attributeName="y" values="-400;200" begin="Vladik_Y.end+0.1s" dur="0.5s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1"/>
</text>
<text fill="#54009D" x="-450" y="-400" font-size="12" dx="0" dy="5" >
<tspan >Магадан </tspan><tspan dx="-45" dy="15" font-size="18" fill="#54009D">⛵</tspan>
<animate id="Mag_X" attributeName="x" values="-450;360" begin="Yakutsk_Y.end+0.1s" dur="0.5s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1"/>
<animate id="Mag_Y" attributeName="y" values="-400;230" begin="Yakutsk_Y.end+0.1s" dur="0.5s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1"/>
</text>
</g>
</svg>
Связанные вопросы:
Анимация появления карты с прорисовкой границ и с последующей закраской внутри
Использование символов Юникода в анимации
Как создать pattern или path цепи вдоль линии
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Доброго времени суток, необходимо сделать светофор в cssУ самого не получилось, а так как сроки сдачи работ жмут, то обращаюсь к вам
Всем привет, при юзании popup'a выскакивает окно со следующей надписью "The content could not be loaded"При нажатии на "The content" перенаправляет на popup, а мне нужно,...
Я вынес header и footer в отдельные файлы, но они не отображаются, может кто подскажет, что я не так делаю?