Уменьшить svg картинки пропорционально

198

11 мая 2018, 08:14

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

Answer 1

Примерно так , указываем 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>