Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.08.2020, 19:04
Аспирант
Отправить личное сообщение для tp-20 Посмотреть профиль Найти все сообщения от tp-20
 
Регистрация: 19.06.2018
Сообщений: 43

Как растянуть SVG по ширине и высоте
Всем привет!
Есть блок с svg, там прописан путь path. В данном случае это контур Крыма.
Как растянуть Крым в svg на всю ширину и длину блока div?
Вот что требуется. Думаю так нагляднее будет:


Код в фиддле:
https://jsfiddle.net/tps20/y6h5a7k3/
Ответить с цитированием
  #2 (permalink)  
Старый 04.08.2020, 02:01
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Вы его воткнули в документ маленькой крохой и пытаетесь масштабировать, забывая о том, что он в рамках объекта.

<style>
.box {
    width: 600px;
    border: 1px solid red;
}

.box svg {
    width: 100%;
    height: auto;
}
</style>

<input type="number" min="400" max="800" step="50" value="600" id="scale" />

<div class="box">
<svg width="117.1" height="74.3" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="none" version="1.2" viewBox="0 0 234.2 148.6" xmlns="http://www.w3.org/2000/svg">
 <path d="m140.2 41.8 1.4-0.9 2.3 4.7 15.9 23.6 8.3 5.8 2 0.2 9.8-2.8 1.2-0.8 1.5-1.6 0.2-0.8 0.1-0.7 0.2-0.5 0.8-0.2 0.3-0.3 0.9-1.2 0.2-0.3 0.2-1.5 0.5-1.4 0.7-1.2 0.9-0.6 1.3 0.2 0.2 0.7-0.5 1.2-0.3 1.5 0.4 0.9 1 0.8 4.2 2.5 2.1 0.8 2.1-0.5 1.6-2.1 0.7-2.4 0.2-0.3 1.6-1 1.1-1.2 1.1-0.4 6.4 0.1 0.8-0.5 0.9-0.7 0.9 0.2 0.4 1-0.4 1.4h0.7l0.5-0.4 0.5-0.5 0.6-0.2 1 0.2 1.8 1.2 1.1 0.3 3.3-0.8 1.1 0.2 1.4 1.9 0.9 0.8 0.9-0.2 1-1.1 0.9-0.1 0.9 0.5 0.8 0.9 1 2.7 0.4 1.9-0.5 0.8-1.8 0.5h-0.6l-0.7-0.1-1.6-0.9-1.3-0.2-1.1 0.2-0.7 0.9-0.3 1.5 0.2 0.6 0.4 0.3 0.1 0.4-0.3 0.6-0.5 0.3-1.3 0.1-0.4 0.2-0.8 1-0.6 1.6-0.4 1.7-0.5 4.6v1.7l0.3 1.7 1.5 1.7 0.7 1.2-0.1 1.2-0.7 0.7-4 1.5-5 0.2-0.6 0.2-0.5 0.3-0.2 0.5-0.3 1.3-0.3 0.4-1 0.3-5-1.1-3.1-2v0.6l-1.7-0.7-1.3 1.2-0.9 1.8-0.8 0.9-4.3-0.2-3.8 0.7-1.1-0.6-0.5-1.7-0.3-0.8-1.7-2-0.7-0.7-3.5-2.2-4-1.6-2.4-0.4h-2.4l-2.3 0.5-2 1-3 2.3-0.5 0.7-0.1 0.9-0.3 0.6-0.1 0.6 0.1 0.8 0.4 0.4 1.6 0.7v0.5l-0.8 0.3-1.8-0.1-0.8 0.3-0.7 0.9-0.1 1 0.4 2.4-2.7-2.1-0.2 0.3-0.6 0.4-0.3 0.4-1.4-0.8-1 0.6-1.2 2.6-1 0.9-2.4 0.5-1 0.5-1.4 2.6-1.1 3.4-1.6 2.4-2.4-0.4-0.5-0.8-0.6-1.1-0.6-0.9-1.1-0.4-1.9-0.1-0.6 0.1-0.6 0.3-1.2 1.2-1 0.2-1.9-0.4-0.8 0.5-0.8 0.4-3.9-0.7-2 0.8-3.9 2.6-2.1 0.9-4.4 1-1.8 0.8-1.4 1.5-0.1-0.5h-0.2l-2.2 3.1-0.3 0.6-0.6 0.7-1.9 3.3-2.1 5.6-0.6 1-0.4 0.2-1.3-0.2h-1.6l-0.3 0.3v0.5l-0.1 0.3-1.2 1.9-0.7 0.6-2.6 0.5-0.7 0.9-0.5 1.2-0.7 1.3-0.7 0.6-1.8 1.3-0.8 0.2-1.3 0.2-5.9 2.8-1.2 0.2-1.2-0.2-3.5-1.4h-0.7l-1.1 0.4-0.7 0.1-3.6-0.1-0.7-0.1 2-0.6 0.1-1 1-0.5 3.7-0.5-0.5-1.9-2.1-5.5-1.5-0.4-0.5-1.9-2.2 0.2-0.9-2.2 2.1-3.3-2.3-3.3-4.7 0.4-0.7-4.6 4.3-2.6-0.8-2.9-3.2-2-2-0.2-0.6-2.6 1.6-0.5 0.6-1 0.3-1.3 0.2-1.6v-1.8l-0.6-3-0.1-1.3-0.2-0.5-1-2-0.2-0.7-0.1-2-0.9-3.2-1.4-1.8-3.8-2.5-3.1-2.8-0.9-0.4-2.3 0.3-2.1 0.8-1.9 1.2-1.3 0.3-0.6-0.7-0.5-1.1-1.2-0.6-2.5-0.8-0.8-0.8-1.9-2.4-1.4-0.8-0.5-0.7-0.6-1.2-0.5-0.3-1-0.4-0.5-0.3-3.7-3.2-2-1.3-2.2-1-8.3-0.7-1.2 0.2-0.9 0.6-1.9 2.2-0.8 0.4h-4l-1.2-0.4-1.9-1-1.2-0.2-1.5-4.3-0.3-1.1 0.8-2.1 1.6-1.8 6.6-5 1.1-0.3 1.3-0.1 1-0.3 0.9-0.5 1.2-1.2 0.4-0.6 0.4-0.4 0.9-0.1 0.5 0.1 1.1 0.4 0.6 0.1 0.8-0.3 0.1-0.6-0.2-0.7-0.1-0.6 0.2-0.7 0.2-0.5 0.3-0.5 1.7-1.8 3.8-2.5 12.6-5.9 0.7-0.5 0.3-1-0.3-0.3-0.5-0.3-0.5-0.4 0.1-0.9 0.5-0.4 0.5 0.3 0.9 1.2 2 1.2 1.9-0.3 4.1-2.5 2-0.9 0.2-0.5 1.7-1.8 0.9-0.4 2.3-1.5 0.8-0.4 0.4 0.2 1 0.7 0.7 0.2 0.6-0.1 1.3-0.4 1.4-1.7 1.1-0.7 0.6-0.3h0.5l0.6 0.1 0.7 0.3 0.4 0.4 0.2 0.5 0.3 0.4 0.6 0.1 1.2-0.2 0.1-0.9-0.1-1.9 0.1-1.4 0.9 0.3 0.9-0.5 1.9-0.5 0.9-0.5-1-0.9-1-0.6-3.2-0.8-1.4 0.1-0.6 0.2-0.4 0.5-0.4 0.3-0.7-0.5 1.1-1.4 0.4-0.9-0.1-0.5-0.7-0.2v-0.7l0.3-0.8 0.4-0.6-0.1-0.6-0.7-2.8-0.1-0.9 0.6-0.8 0.5-0.9-0.2-1.2-0.9-1.6 1.8-1.9 0.6-2-0.5-2.9 0.4-0.6 0.6 0.5 0.4 0.6 2.5 4.6 0.5 0.5 2.5 1.5 0.7-0.6 0.3-1.2v-2.7l2.3 1 0.3 0.4v2.2l-0.2 0.8-0.5 0.6 2.1 2.6 0.5 1.3-1.1 0.5v0.3l0.1 0.3 0.3 0.5-0.4 0.6 0.9-0.1 0.7-0.6 0.5-0.7 0.5-0.3 0.7 0.3 0.4 0.8 0.2 0.7 0.4 0.3 0.3 0.4 0.9 0.6 0.9 0.3 0.4-1-0.3-0.9-0.4-0.9v-0.7l1.1-0.5-0.3-0.8-0.4-0.1-0.6 0.1-0.6-0.3-1-0.9-0.2-0.5 0.6-0.3 2.6 0.1 1.1 0.4 1.1 0.7 2.3 3.3 1.8 1 3.1 2.8v0.5l-0.6 0.7-0.7 0.3h-0.8l-1-0.4 0.3 1.3 0.6 1.1 1.4 1.4 0.7-0.6 0.9-0.1 0.8-0.4 0.3-1.4-0.1-1.6-0.3-1-0.6-0.6-3.2-2.8-0.6-0.2-0.1-0.2-0.1-0.4 0.1-0.4 0.1-0.1h0.3l0.5 0.4 0.7 0.3 0.4 0.2 0.4 0.4 0.2 0.4 0.4-0.6 2.4 0.7 0.9 0.6-0.7 0.9 0.6 1.1 0.8-0.2 2-3.1 0.1 0.5-0.1 1.3 0.2 1.2 0.4 0.4 0.6 0.3 0.6 0.2 0.5-0.1 0.3-0.4 0.2-1.4 0.2-0.4h1.1l0.7 0.7 1.3 2-1.1 0.5-0.4 0.1 0.9 0.8 1.2 0.6 0.7 0.8-0.2 1.6-0.4 0.3-1.2 0.6-0.3 0.4-0.1 1-0.5 1.3-0.1 0.8 1.5-1.7v1.1l-0.4 0.6 0.5-0.2 0.3-0.1 0.2-0.3 0.2-0.5h0.3v1.9l0.3 0.5 0.3-0.7 0.2-2 0.4-1.6 0.9-1.1 1.2-0.3 0.9 0.5-0.4 0.4-0.7 1.2 0.8 2 0.6 0.8 0.7-0.3 1-1.6 0.5-1 0.2-0.7 0.3-0.2 0.9 0.3 0.9 0.1 0.5-1-0.2-0.7-0.6-0.8-1.1-1.2v-0.5l4 1.4 0.6 0.4 0.1 0.8 0.2 0.4v0.6l-0.3 1.2-0.2 0.5-0.9 1.2-0.4 0.6-0.5 0.3-0.5 0.4-0.8 0.2-0.7 0.1-0.5 0.5-0.2 1.8-0.5 0.5-0.7 0.3-0.4 0.8-0.3 0.9-0.3 0.7-0.6 0.6-1.6 1.1v0.5l2.4-0.5 2.2-1.1 5.7-5.3 0.9-0.5 2.3-0.5 0.9-0.7 1.5-1.8 0.3 1.1 0.1 0.9-0.1 0.8-0.4 0.7-0.4-0.1-1.8 0.3-0.1 0.1-0.8 0.2-0.6 0.3-0.5 0.6-0.2 0.9-0.2 1.1-0.7 1.4-0.3 1 1.5-0.6 1.4-1 1.4-0.6 1.4 0.6 0.8 1.8-0.6 1.7-1.2 1.6-0.9 1.4 1.2-0.4 1 0.2 2 0.7 1.3-0.2 2-1.2 1.2-0.2v0.5l-0.4 0.5-1 1-0.5 0.7 1.5 0.3 0.4 0.2 0.4 0.6 0.7 1.2 0.4 0.5 0.8 0.2 2.9-0.2 0.6 0.4 1.4 3.3 0.6 0.5 0.7 0.3 0.4 0.5 0.2 1.2 0.3 1 1.4 1.3 0.3 1 0.9 5.4 0.2 0.2 0.2 0.3-0.2 0.8-0.3 0.5-0.7 0.5-0.3 0.3-0.7 0.6-1.9 0.4-0.7 0.4v0.6l0.8 0.7 1.5 3 0.7 0.8 3.3 2.6h0.5l0.6-0.3 1-0.4 0.8 0.1 1 0.2 0.8 0.5 0.4 0.6 1.1 0.7 6.3 2.3 0.5 0.4 0.7 0.9 0.9 0.9 0.9 0.5 0.9-0.3 0.8-0.5 1.2-1.4-0.8-1.1-0.9-0.4-1-0.2-1.1-0.5-0.5-0.6-0.3-0.7-0.3-0.6-0.6-0.3-0.6-0.1-0.4-0.3-11.7-16.9-2.4-2.7-0.3-0.7-1.5-2-1-2.4-0.5-0.8-0.4-0.4-0.5-0.2-0.5-0.4-0.1-1-0.9-1.5-0.1-0.3z" fill="#d5e3ef" stroke="#4682b4" stroke-width="1.731" data-id="UKR283" data-name="Crimea" name="Crimea"/>
 <path d="m71.1 145.3-0.5-0.1-4.1-2-0.8-0.7-0.3-1.5-0.3-0.7-1.7-2.2-0.6-0.5-1 0.1-1.2 0.3-1.2 0.1-1-0.8-0.7-0.7-6-4.2-0.4-1v-0.9l0.2 0.2 1.7-0.3 0.4-0.3 1.3-0.9 0.5-0.1h1.8l0.4-0.3 0.8-0.3h2.8l1.2-0.5-0.8-0.3-1.8-0.3-0.5-0.5-0.1-1.1 0.5-1 0.7-0.8 0.5-0.8 0.2-1.3-0.1-0.8-0.6-1.6-0.3-2.2-0.3-1.1-0.5-1 0.5-0.4 0.1-0.3 0.2-0.4 0.4-1.6 0.5-1.4 0.7-1 0.6-0.2 0.6 2.6 2 0.2 3.2 2 0.8 2.9-4.3 2.6 0.7 4.6 4.7-0.4 2.3 3.3-2.1 3.3 0.9 2.2 2.2-0.2 0.5 1.9 1.5 0.4 2.1 5.5 0.5 1.9-3.7 0.5-1 0.5-0.1 1z" fill="#d5e3ef" stroke="#4682b4" stroke-width="1.731" data-id="UKR5482" data-name="Sevastopol" name="Sevastopol"/>
</svg>
</div>

<script>
scale.oninput = (a) => document.querySelector('div.box').style.width = a.target.value + 'px';
</script>


Здесь документ имеет размер svg (изменено) и масштабирование посредством css по родителю.

Последний раз редактировалось laimas, 04.08.2020 в 03:47.
Ответить с цитированием
  #3 (permalink)  
Старый 04.08.2020, 14:05
Аспирант
Отправить личное сообщение для tp-20 Посмотреть профиль Найти все сообщения от tp-20
 
Регистрация: 19.06.2018
Сообщений: 43

спасибо! это помогло! лайкнул в карму )
Ответить с цитированием
  #4 (permalink)  
Старый 04.08.2020, 14:06
Аспирант
Отправить личное сообщение для tp-20 Посмотреть профиль Найти все сообщения от tp-20
 
Регистрация: 19.06.2018
Сообщений: 43

laimas,
спасибо! это помогло! лайкнул в карму )
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как анимировать/двигать SVG ? Максим Ученик Элементы интерфейса 6 13.08.2019 17:30
Как выделить path у SVG? XamMax Events/DOM/Window 2 10.06.2019 15:57
Возможна ли перерисовка SVG MC-XOBAHCK Общие вопросы Javascript 4 03.09.2018 22:11
Как перерисовать все элементы SVG на Canvas (d3.js+leaflet.js+html2canvas) Trippal Общие вопросы Javascript 0 10.02.2016 18:25
Растянуть таблицу по высоте на весь экран micscr (X)HTML/CSS 14 28.09.2009 11:17