Я не понимаю как адаптировать 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>