1

Я не понимаю как адаптировать svg
1) Я задаю родителю, в котором лежит svg width: 200px, а родитель уменьшает свою ширину, не понимаю как с этим бороться
2) При уменьшении экрана, 2 элемента, которые в середине, уменьшаются сильнее, хотя для всех элементов я задавал одинаковые css правила.

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

Я собираюсь адаптировать это под разные разрешения, c помощью @media запросов, возможно ли это сделать только из css?
Это можно посмотреть здесь: https://mihinov.github.io/#team (проскролльте чуть вниз, там будут эти круги анимированные)

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Raleway', sans-serif;
    color: white;
    font-size: 16px;
}

.teamwork {
    padding-top: 0;
    padding-bottom: 120px;
}

.section {
    color: #505050;
    padding: 0 30px;
    display: block;
}

.cards__progress__bar {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: space-around;
	max-width: 1000px;
	margin: 0 auto;
	margin-top: 80px;
}

.progress__container {
	width: 200px;
	margin-bottom: 50px;
	padding: 0 25px;
}

.progressbar__track {
	fill: transparent;
	stroke: #ededed;
	stroke-width: 2px;
}

.progressbar__thumb {
	fill: transparent;
	stroke-dasharray: 0 1;
	stroke: #ff0036;
	stroke-width: 2px;
	transform-origin: center;
	transform: rotate(180deg);
}

.progressbar text {
	font-family: 'Lato', sans-serif;
	font-weight: 400;
}

.progressbar text tspan {
	fill: #ff0036;
}

/*************** 

PROGRESS__TEXT

****************/

.progress__text {
	text-align: center;
	margin-top: 10px;
}

.progress__title {
	color: #262626;
	font-size: 20px;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.progress__subtitle {
	color: #505050;
	font-family: 'Lato', sans-serif;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700|Raleway:400,600,700&display=swap" rel="stylesheet">
</head>

<section class="section teamwork">
  <div class="cards__progress__bar">

    <div class="progress__container">
      <svg class="progressbar" viewbox="0 0 64 64">
        <circle class="progressbar__track" cx="50%" cy="50%" r="30"></circle>
        <circle class="progressbar__thumb" cx="50%" cy="50%" r="30" data-circle="90"></circle>
        <text x=32 y=33 text-anchor=middle dominant-baseline=middle><tspan>0</tspan>%</text>
      </svg>
      <div class="progress__text">
        <div class="progress__title">Photoshop</div>
        <div class="progress__subtitle">Donec luctus tortor in placerat faucibus</div>
      </div>
    </div> <!-- .progress__container -->

    <div class="progress__container">
      <svg class="progressbar" viewbox="0 0 64 64">
        <circle class="progressbar__track" cx="50%" cy="50%" r="30"></circle>
        <circle class="progressbar__thumb" cx="50%" cy="50%" r="30" data-circle="80"></circle>
        <text x=32 y=33 text-anchor=middle dominant-baseline=middle><tspan>0</tspan>%</text>
      </svg>
      <div class="progress__text">
        <div class="progress__title">HTML</div>
        <div class="progress__subtitle">Donec luctus tortor in placerat faucibus</div>
      </div>
    </div> <!-- .progress__container -->

    <div class="progress__container">
      <svg class="progressbar" viewbox="0 0 64 64">
        <circle class="progressbar__track" cx="50%" cy="50%" r="30"></circle>
        <circle class="progressbar__thumb" cx="50%" cy="50%" r="30" data-circle="70"></circle>
        <text x=32 y=33 text-anchor=middle dominant-baseline=middle><tspan>0</tspan>%</text>
      </svg>
      <div class="progress__text">
        <div class="progress__title">PHP</div>
        <div class="progress__subtitle">Donec luctus tortor in placerat faucibus</div>
      </div>
    </div> <!-- .progress__container -->

    <div class="progress__container">
      <svg class="progressbar" viewbox="0 0 64 64">
        <circle class="progressbar__track" cx="50%" cy="50%" r="30"></circle>
        <circle class="progressbar__thumb" cx="50%" cy="50%" r="30" data-circle="90"></circle>
        <text x=32 y=33 text-anchor=middle dominant-baseline=middle><tspan>0</tspan>%</text>
      </svg>
      <div class="progress__text">
        <div class="progress__title">WordPress</div>
        <div class="progress__subtitle">Donec luctus tortor in placerat faucibus</div>
      </div>
    </div> <!-- .progress__container -->

  </div> <!-- .cards__progress__bar -->
</section>

1 ответ 1

1

У меня svg так вёл себя, из-за того, что он был зажат padding.
Каждому .progress__container был задан padding: 0 25px;. Я убрал это, поведение чуть поменялось, но не совсем. Я решил убрать у всех элементов padding, которые были на странице.
У .section был padding: 0 30px. При малом экране я убрал эти паддинги и svg стал вести себя так, как нужно

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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