6

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

введите сюда описание изображения

7
  • viewBox сделайте вместо width и height
    – user33274
    10 мая 2018 в 7:17
  • 2
    @technoimpex technoimpex Я вас приветствую на stackoverflow! Тут есть некоторые правила на ресурсе - Нужна, пусть и неудачная, но попытка, что-то попробовать сделать самому. А там поможем вам 10 мая 2018 в 7:38
  • 2
    @Alexandr_TT да ладно Саша....не надо быть суровым ...хотя превратили roSO в халявный фриланс
    – user33274
    10 мая 2018 в 7:43
  • 3
    @МаксимЛенский да разве я суровый? Вот плюсик ему первый поставил для бодрости и чтобы человек мог активней действовать. 10 мая 2018 в 7:46
  • 1
    @Alexandr_TT я тоже плюсик влепил - что бы затянуть в ряды svg
    – user33274
    10 мая 2018 в 7:51

1 ответ 1

5

Примерно так , указываем viewBox и всё остальное само становится резиновым

я не преследовал цель сделать один в один

<svg viewBox="0 0 297 210">
  <g transform="translate(221.872 -80.26)">
    <ellipse cx="-202.295" cy="229.531" fill="red" stroke="#322525" stroke-linejoin="round" stroke-width="4" paint-order="stroke fill markers" rx="8.804" ry="9.071"/>
    <path fill="none" stroke="#000" stroke-width="2" d="M-202.595 220.46l-6.993 14.93m7.012-14.533l6.992 14.93"/>
    <g transform="translate(76.807 .756)">
      <ellipse cx="-202.295" cy="229.531" fill="red" stroke="#322525" stroke-linejoin="round" stroke-width="4" paint-order="stroke fill markers" rx="8.804" ry="9.071"/>
      <path fill="none" stroke="#000" stroke-width="2" d="M-202.595 220.46l-6.993 14.93m7.012-14.533l6.992 14.93"/>
    </g>
    <path fill="maroon" stroke="#000" stroke-width=".265" d="M-215.068 252.777l3.78-9.26-1.135-.19-.189-2.645 22.356-.657.245 2.825-1.3.434-4.292 10.06-2.457-.19 3.78-10.016-6.07.146-4.702 10.438-2.757-.199 4.836-10.24h-6.449l-3.321 9.727zm76.25-.219l3.94-9.193-1.13-.21-.142-2.648 22.364-.266.195 2.829-1.642.405-4.132 9.99-2.453-.233 3.954-9.949-6.072.04-4.884 10.354-2.752-.246 5.013-10.154-6.447-.113-3.491 9.667z"/>
    <path fill="none" stroke="#000" stroke-width="2" d="M-202.595 220.46l.267-18.074 77.247-.802-.707 19.632"/>
    <ellipse cx="-165.306" cy="201.451" stroke="#322525" stroke-linejoin="round" stroke-width="1.764" paint-order="stroke fill markers" rx="3.726" ry="2.657"/>
    <path fill="none" stroke="#000" stroke-width="2" d="M-164.905 197.308l1.336-104.502 60.136.535 1.069-.268.267 23.787s2.138-.267 0 0"/>
    <path fill="none" stroke="#000" stroke-width=".265" d="M-132.833 128.62l.535 64.68c1.079 3.063 4.167 4.118 6.95 5.478 11.948 3.287 22.912 3.265 33.942 3.074l16.838-2.673c3.306-1.686 6.29-3.586 7.483-6.681v-63.343l-.534-3.207c-1.68-2.878-4.355-3.764-6.682-5.346l-10.958-2.673-16.838-1.069c-4.419.006-13.067.195-15.568 1.337-5.99 1.098-5.718 1.518-8.219 2.138-3.395 1.134-5.316 3.153-6.949 5.345z"/>
    <path fill="#51bcbc" stroke="#000" stroke-width=".265" d="M-70.025 134.1c.87-1.655-.24-2.814-.668-4.143l-2.672-2.205-4.01-2.272-5.278-1.737-10.29-1.003-5.212-.334-7.951.2-8.219.87-9.22 1.937-3.475 2.339-1.737 1.536c-.744 1.47-1.72 3.007-1.737 4.744l3.608 3.274 5.947 2.94c4.078 1.795 8.466 2.351 12.895 2.74 2.18.312 6.326.624 9.488.935 3.679-.215 7.087-.094 11.426-1.136 2.387-.392 4.788-.844 7.35-1.937 0 0 5.078-1.737 5.279-2.005.2-.267 3.474-3.073 3.474-3.073z"/>
    <path fill="#51bcbc" stroke="#000" stroke-width=".265" d="M-70.025 134.1l.268 56.126-2.406 3.073-9.755 3.074-14.7 1.87-12.962-.534-13.097-2.672-5.078-2.005-2.539-2.272-.2-56.728"/>
    <path fill="none" stroke="#000" stroke-width=".265" d="M-132.833 128.62l2.071 2.005 2.54 1.67 5.478 2.072 9.221 2.138 9.622.868 11.693-.267 11.225-1.47 8.286-2.873 3.608-2.339 1.737-2.74"/>
    <path fill="none" stroke="#000" stroke-width=".265" d="M-128.156 125.413c.51-1.7 1.56-1.515 2.54-2.272l5.345-2.405 5.546-1.27 7.35-.802 7.817-.066h6.014l7.884.935 10.69 2.873c1.748 1.448 3.194 2.896 3.876 4.343.46 1.294-1.026 2.344-1.87 3.475-1.916.983-3.631 2.539-5.546 2.673-1.977.859-3.863 1.229-6.682 1.536l-9.488 1.203-13.297-.2-7.884-1.604-7.217-1.737-4.276-2.272-1.47-2.138c-.28-1.51.27-1.779.668-2.272z"/>
    <path fill="none" stroke="#000" stroke-width=".265" d="M-130.494 134.032l3.608 3.274 9.555 4.41 8.953 1.47 9.822.735 7.975-.405 7.861-1.666 2.94-1.002c3.44-1.395 7.02-2.709 8.753-5.078l1.002-1.67"/>
    <path stroke="#000" stroke-width=".265" d="M-100.226 198.912l.267 6.682 60.938.4v1.872l10.156-3.475-9.89-3.34.268 2.004h-58.665l.534-4.811z"/>
  </g>
</svg>

2
  • 1
    Макс, балуешь их....
    – Air
    10 мая 2018 в 8:24
  • 1
    @Air я не до конца сделал - специально и криво - тоже специально .. чё бы не совсем на халяву
    – user33274
    10 мая 2018 в 8:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.