3

Есть вот такое колесо:

Колесо

Т.е. нужно сделать 3 сплошных circle, поместить друг в друга и второй разделить на 6 частей.

Цвет элемента будет меняться по нажатию, т.е. плавно из серого переходить в градиент и добавляться верхний border.

Подскажите, как лучше такое реализовать, на SVG или же Canvas? Вот эти иконки будут интерактивно меняться в зависимости от выбранной части, также текст в центре.

4
  • 1
    на svg конечно проще 13 июл 2019 в 16:14
  • @StrangerintheQ в svg вообще не понимаю как это делать :(
    – ccxdec
    13 июл 2019 в 16:26
  • 1
    можно в редакторе, можно по формулам, могу показать как по формулам... 13 июл 2019 в 16:28
  • @StrangerintheQ как вам удобно, хочу понять как это делать, заготовки есть разные, кто-то плодит div, кто-то через css задают миллион свойств Если на svg практичнее всего сделать - я бы сделал так, но как ?)
    – ccxdec
    13 июл 2019 в 16:44

3 ответа 3

4

Решение SVG + CSS

Окружность можно разделить на 6 отдельных секторов с помощью команды Elliptical Arc для path подробнее здесь

  • Рисуем один сектор

svg {
  height: 440px;
  width: 440px;
}
.sector {
  fill: #5F5E5F;
  stroke: #BFBFBF;
  stroke-width:2;
} 
:hover.sector {
 fill:#9F45E2;
 stroke-width:6;
 stroke:#9F45E2;
 transition: fill 0.5s, stroke-width 0.5s;
 
}
<svg viewBox='0 0 110 110'>

  <path class="sector " d='M55,55 L30,11.69 A50,50 0 0,1 80,11.69z' />
</svg>

  • Добавляем ещё 5 секторов

svg {
  height: 440px;
  width: 440px;
}
.sector {
  fill: #5F5E5F;
  stroke: #BFBFBF;
  stroke-width:2;
} 
:hover.sector {
 fill:#9F45E2;
 stroke-width:6;
 stroke:#9F45E2;
 transition: fill 0.5s, stroke-width 0.5s;
<svg viewBox='0 0 110 110'>
  
  <!-- Блок секторов --> 
  <path class="sector " d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' />
  <path class="sector" d='M55,55 L80,98.30 A50,50 0 0,1 30,98.30z' />
  <path class="sector" d='M55,55 L30,98.30 A50,50 0 0,1 5,55z' />
  <path class="sector" d='M55,55 L5,55 A50,50 0 0,1 30,11.69z' />
  <path class="sector " d='M55,55 L30,11.69 A50,50 0 0,1 80,11.69z' />
  <path class="sector" d='M55,55 L80,11.69 A50,50 0 0,1 105,55z' />
  
</svg>

Добавляем окружности для создания центральной части, добавляем текст и иконки.

Иконки брал здесь

Для придания нужного размера иконкам используем scale(0.7)

Для позиционирования икон используется команда translate(X Y)

Ниже полный код:

svg {
  height: 440px;
  width: 440px;
}
.sector {
  fill: #5F5E5F;
  stroke: #BFBFBF;
  stroke-width:2;
} 
:hover.sector {
 fill:#9F45E2;
 stroke-width:6;
 stroke:#9F45E2;
 transition: fill 0.5s, stroke-width 0.5s;
 
}
#F {
  fill: #5F5E5F;
  stroke: #BFBFBF;
} 
#S {
  fill: none;
  stroke: #BFBFBF;
   stroke-width:5;
}
#T {
  fill: #707070;
  stroke: #FFFFFF;
  stroke-width:3;
}
.icon {
fill:none;
stroke:#CCCACD;
transition: fill 0.5s;
}
:hover.icon {
fill:#9F45E2;
}
</style>
<svg viewBox='0 0 110 110'>
  
  <!-- Блок секторов --> 
  <path class="sector " d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' />
  <path class="sector" d='M55,55 L80,98.30 A50,50 0 0,1 30,98.30z' />
  <path class="sector" d='M55,55 L30,98.30 A50,50 0 0,1 5,55z' />
  <path class="sector" d='M55,55 L5,55 A50,50 0 0,1 30,11.69z' />
  <path class="sector " d='M55,55 L30,11.69 A50,50 0 0,1 80,11.69z' />
  <path class="sector" d='M55,55 L80,11.69 A50,50 0 0,1 105,55z' />
  
 <circle id="F" cx='55' cy='55' r='25' /> 
  <circle id="S" cx='55' cy='55' r='23'  /> 
   <circle id="T" cx='55' cy='55' r='22'  /> 
    <circle id="Big" cx='55' cy='55' r='50' fill="none" stroke="#BFBFBF" stroke-width="2" /> 
  
  
  <text x="55" y="55" font-size="5" fill="white" font-weight="bold"  text-anchor="middle"  > Текст в круге </text> 
  
  <!-- Блок иконок --> 
 <path class="icon" transform="translate(47 10) scale(0.7)" d="M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm7-7H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-1.75 9c0 .23-.02.46-.05.68l1.48 1.16c.13.11.17.3.08.45l-1.4 2.42c-.09.15-.27.21-.43.15l-1.74-.7c-.36.28-.76.51-1.18.69l-.26 1.85c-.03.17-.18.3-.35.3h-2.8c-.17 0-.32-.13-.35-.29l-.26-1.85c-.43-.18-.82-.41-1.18-.69l-1.74.7c-.16.06-.34 0-.43-.15l-1.4-2.42c-.09-.15-.05-.34.08-.45l1.48-1.16c-.03-.23-.05-.46-.05-.69 0-.23.02-.46.05-.68l-1.48-1.16c-.13-.11-.17-.3-.08-.45l1.4-2.42c.09-.15.27-.21.43-.15l1.74.7c.36-.28.76-.51 1.18-.69l.26-1.85c.03-.17.18-.3.35-.3h2.8c.17 0 .32.13.35.29l.26 1.85c.43.18.82.41 1.18.69l1.74-.7c.16-.06.34 0 .43.15l1.4 2.42c.09.15.05.34-.08.45l-1.48 1.16c.03.23.05.46.05.69z"/>
  
   
  <path class="icon" transform="translate(80 27) scale(0.7)" d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/>
  
   <path class="icon" transform="translate(80 66) scale(0.7)" d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm4.24 16L12 15.45 7.77 18l1.12-4.81-3.73-3.23 4.92-.42L12 5l1.92 4.53 4.92.42-3.73 3.23L16.23 18z"/> 
 
</svg>

JS

Разбить круг на любое количество секторов можно с помощью javascript, который реализует формулу Elliptical Arc для path

  • Задаются переменные fromAngle, toAngle начального и конечного угла сектора
  • Задаются переменные для расчета начальных и конечных координат сектора fromCoordX, fromCoordY, toCoordX, toCoordY
  • Вызов функции для рисования 6 секторов - createSector(55, 55, 50, 6);, где
    55 координаты центра окружности
    50 - радиус окружности
    6 - количество секторов

var fromAngle, toAngle, fromCoordX, fromCoordY, toCoordX, toCoordY, path, d;

function createSector(cx, cy, r, part) {
  for (var i = 0; i < part; i++) {
    path = document.createElementNS("http://www.w3.org/2000/svg", "path");
    fromAngle = i * 360 / part;
    toAngle = (i + 1) * 360 / part;
    fromCoordX = cx + (r * Math.cos(fromAngle * Math.PI / 180));
    fromCoordY = cy + (r * Math.sin(fromAngle * Math.PI / 180));
    toCoordX = cx + (r * Math.cos(toAngle * Math.PI / 180));
    toCoordY = cy + (r * Math.sin(toAngle * Math.PI / 180));
    d = 'M' + cx + ',' + cy + ' L' + fromCoordX + ',' + fromCoordY + ' A' + r + ',' + r + ' 0 0,1 ' + toCoordX + ',' + toCoordY + 'z';
    path.setAttributeNS(null, "d", d);
    document.getElementById('pie').appendChild(path);
  }
}

createSector(55, 55, 50, 6);
svg {
  height: 220px;
  width: 220px;
}
path {
   fill: #5F5E5F;
  stroke: #BFBFBF;
  stroke-width:2;
} 
<svg viewBox="0 0 110 110" id="pie"></svg>

8 секторов

var fromAngle, toAngle, fromCoordX, fromCoordY, toCoordX, toCoordY, path, d;

function createSector(cx, cy, r, part) {
  for (var i = 0; i < part; i++) {
    path = document.createElementNS("http://www.w3.org/2000/svg", "path");
    fromAngle = i * 360 / part;
    toAngle = (i + 1) * 360 / part;
    fromCoordX = cx + (r * Math.cos(fromAngle * Math.PI / 180));
    fromCoordY = cy + (r * Math.sin(fromAngle * Math.PI / 180));
    toCoordX = cx + (r * Math.cos(toAngle * Math.PI / 180));
    toCoordY = cy + (r * Math.sin(toAngle * Math.PI / 180));
    d = 'M' + cx + ',' + cy + ' L' + fromCoordX + ',' + fromCoordY + ' A' + r + ',' + r + ' 0 0,1 ' + toCoordX + ',' + toCoordY + 'z';
    path.setAttributeNS(null, "d", d);
    document.getElementById('pie').appendChild(path);
  }
}

createSector(55, 55, 50, 8);
svg {
  height: 220px;
  width: 220px;
}
path {
  fill: #5F5E5F;
  stroke: #BFBFBF;
  stroke-width:2;
}
<svg viewBox="0 0 110 110" id="pie"></svg>

12 секторов

var fromAngle, toAngle, fromCoordX, fromCoordY, toCoordX, toCoordY, path, d;

function createSector(cx, cy, r, part) {
  for (var i = 0; i < part; i++) {
    path = document.createElementNS("http://www.w3.org/2000/svg", "path");
    fromAngle = i * 360 / part;
    toAngle = (i + 1) * 360 / part;
    fromCoordX = cx + (r * Math.cos(fromAngle * Math.PI / 180));
    fromCoordY = cy + (r * Math.sin(fromAngle * Math.PI / 180));
    toCoordX = cx + (r * Math.cos(toAngle * Math.PI / 180));
    toCoordY = cy + (r * Math.sin(toAngle * Math.PI / 180));
    d = 'M' + cx + ',' + cy + ' L' + fromCoordX + ',' + fromCoordY + ' A' + r + ',' + r + ' 0 0,1 ' + toCoordX + ',' + toCoordY + 'z';
    path.setAttributeNS(null, "d", d);
    document.getElementById('pie').appendChild(path);
  }
}

createSector(55, 55, 50, 12);
svg {
  height: 220px;
  width: 220px;
}
path {
 fill: #5F5E5F;
  stroke: #BFBFBF;
  stroke-width:2;
}
<svg viewBox="0 0 110 110" id="pie"></svg>

1
  • 1
    спасибо, за разъяснение!
    – ccxdec
    14 июл 2019 в 12:09
4

Сверстал что-то подобное, при помощи синусов да косинусов. чтобы получить прямо точь в точь что и в макете надо еще с этим посидеть. пока так, для понимания я думаю хватит.

let items = ['🍌','🍉','🍇','🍓','🍒','🍍'],
    r1 = 90, 
    r2 = 50, 
    step = Math.PI*2/items.length;
    
let activate = el => document.querySelectorAll('.arc')
  .forEach(arc => arc.style.strokeWidth = (arc.classList.contains(el.id) ? 4:0) + 'px');
                             
let cs = a => [Math.cos(a), Math.sin(a)]

let icon = (e, i) => {
  let p = cs(i*step + step/2), r = (r1/2 + r2/2);
  return `<text x='${p[0]*r}' y='${p[1]*r}'>${e}</text>`;
}

let grid = (e, i) => {
    let p1 = cs(i*step);
    return `<path class='grid' d='
      M${p1[0]*(r1)} ${p1[1]*(r1)}
      L${p1[0]*(r2)} ${p1[1]*(r2)}
    '></path>`;
}


let arc = (e, i) => {
    let p1 = cs(i*step), p2 = cs(i*step + step), r = r1+2.5;
    return `<path class='arc s${i}' d='
      M${p1[0]*r} ${p1[1]*r}
      A${r} ${r} 0 0 1 ${p2[0]*r} ${p2[1]*r}
    '></path>`;
}

let sector = (e, i) => {
  let p1 = cs(i*step), p2 = cs(i*step + step);
  return `<path class='sector' id='s${i}' onmouseover='activate(this)' d='
      M${p1[0]*r2} ${p1[1]*r2} 
      L${p1[0]*r1} ${p1[1]*r1} 
      A${r1} ${r1} 0 0 1 ${p2[0]*r1} ${p2[1]*r1} 
      L${p2[0]*r2} ${p2[1]*r2} 
      A${r2} ${r2} 0 0 0 ${p1[0]*r2} ${p1[1]*r2}
    '></path>`
}

svg.innerHTML += items.map(sector).join('')
svg.innerHTML += items.map(icon).join('')
svg.innerHTML += `<circle r=${r1}></circle><circle r=${r2}></circle>`;
svg.innerHTML += items.map(grid).join('')
svg.innerHTML += items.map(arc).join('')
path.sector {
  fill: url(#gradient);
  cursor: pointer;
  fill-opacity:0.5;
  transition: 0.5s;
}

path.arc {
  fill: none;
  stroke: purple;
  stroke-width: 0;
  pointer-events: none;
  transition: 0.5s;
}

path.sector:hover {
  fill-opacity:1;
}

text {
  dominant-baseline: middle;
  text-anchor: middle;
  pointer-events: none;
}

circle {
  fill: none;
  stroke: lightgray;
  pointer-events: none;
  stroke-width: 5px;
}

path.grid {
  stroke: lightgray;
  pointer-events: none;
  stroke-width: 3px;
}
<svg id="svg" viewbox="-100 -100 200 200" height="90vh">
  <linearGradient id="gradient" x2="1" y2="1">
    <stop offset="0%" stop-color="purple" />
    <stop offset="100%" stop-color="garkgray" />
  </linearGradient>
</svg>

4
  • спасибо! разделители через dash-array можно сделать ? или тоже через формулы
    – ccxdec
    13 июл 2019 в 18:28
  • @ANYWAYCODE ну если получится обводками - так конечно проще, но у Вас такой макет, что боюсь не выйдет... 13 июл 2019 в 18:52
  • а каким образом это сделать, отступами между элементами?, но ведь они не задаются, а как задавать я вообще не знаю(
    – ccxdec
    13 июл 2019 в 19:31
  • @ANYWAYCODE я бы еще линий поверх добавил по тем же координатам 13 июл 2019 в 19:32
2

В общем я только с градиентной заливкой на hover завис ..а так все хотелки выполнены

Если что то не ясно спрашивайте, не применял алгоритмов и само изготовление не сложное

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">

<svg width="400" height="400" viewbox="0 0 4 4">

 	   <defs>
 	   	<style>
 	   		.hover{
 	   			stroke-opacity: 0;
 	   		}
 	   		g:hover .hover{
 	   			stroke-opacity: 1;
 	   		}
 	   		g:hover text{
 	   			fill: red;
 	   		}
 	   	</style>
 	   </defs>

      <circle cx="2" cy="2" r="1.05" 
       fill="none"
       stroke="lightgreen"
       stroke-width="1.06"/>

       <circle cx="2" cy="2" r="0.45" 
       fill="lightgreen"/>
       <text font-size="0.1"
       x="1.66" 
       y="2.05"
       font-family="sans-serif"> текст в центре </text>

<g> 	  
 	  <circle cx="2" cy="2" r="1" 
 	  fill="none" 
 	  stroke="lightblue"
 	  stroke-width="1" 
 	  stroke-dasharray="1 6" 
 	  stroke-dashoffset="-0.01"/>
 	  <text x="2.7" y="2.7"
 	  font-family="FontAwesome"
 	  font-size="0.5px" 
 	  fill="lightgreen"></text><!--android-->
 	  <circle cx="2" cy="2" r="1.5"
 	  fill="none"
 	  stroke="red"
 	  stroke-width="0.1" 
 	  stroke-dasharray="1.49 9"
 	  stroke-dashoffset="-0.01" class="hover"/>
</g>
<g>
      <circle cx="2" cy="2" r="1" 
 	  fill="none" 
 	  stroke="lightblue"
 	  stroke-width="1" 
 	  stroke-dasharray="1 6" 
 	  stroke-dashoffset="-1.05"/>
 	  <text x="1.7" y="3.2"
      font-family="FontAwesome"
      fill="lightgreen"
 	  font-size="0.5px" 
 	  ></text> <!--руки-->
 	  <circle cx="2" cy="2" r="1.5"
 	  fill="none"
 	  stroke="red"
 	  stroke-width="0.1" 
 	  stroke-dasharray="1.49 9"
 	  stroke-dashoffset="-1.6" class="hover"/>
</g>
<g>

 	  <circle cx="2" cy="2" r="1" 
 	  fill="none" 
 	  stroke="lightblue"
 	  stroke-width="1" 
 	  stroke-dasharray="1 6" 
 	  stroke-dashoffset="-2.1"/>
 	  <text x="0.85" y="2.6"
      font-family="FontAwesome"
      fill="lightgreen"
 	  font-size="0.5px" 
 	  ></text> <!--замок-->
 	  <circle cx="2" cy="2" r="1.5"
 	  fill="none"
 	  stroke="red"
 	  stroke-width="0.1" 
 	  stroke-dasharray="1.49 9"
 	  stroke-dashoffset="-3.17" class="hover"/>
</g>
<g>

	  <circle cx="2" cy="2" r="1" 
 	  fill="none" 
 	  stroke="lightblue"
 	  stroke-width="1" 
 	  stroke-dasharray="1 6" 
 	  stroke-dashoffset="3.86"/>
 	  <text x="0.85" y="1.7"
      font-family="FontAwesome"
      fill="lightgreen"
 	  font-size="0.5px" 
 	  ></text> <!--душ-->
 	  <circle cx="2" cy="2" r="1.5"
 	  fill="none"
 	  stroke="red"
 	  stroke-width="0.1" 
 	  stroke-dasharray="1.49 9"
 	  stroke-dashoffset="-4.71" class="hover"/>
</g>
<g>

 	  <circle cx="2" cy="2" r="1" 
 	  fill="none" 
 	  stroke="lightblue"
 	  stroke-width="1" 
 	  stroke-dasharray="1 6" 
 	  stroke-dashoffset="2.8"/>
 	  <text x="1.75" y="1.2"
      font-family="FontAwesome"
      fill="lightgreen"
 	  font-size="0.5px" 
 	  ></text> <!--бинокль-->
 	  <circle cx="2" cy="2" r="1.5"
 	  fill="none"
 	  stroke="red"
 	  stroke-width="0.1" 
 	  stroke-dasharray="1.49 9"
 	  stroke-dashoffset="-6.3"  class="hover"/>
</g>
<g>

  	  <circle cx="2" cy="2" r="1" 
 	  fill="none" 
 	  stroke="lightblue"
 	  stroke-width="1" 
 	  stroke-dasharray="1 6" 
 	  stroke-dashoffset="1.75"/>
	  <text x="2.5" y="1.7"
      font-family="FontAwesome"
      fill="lightgreen"
 	  font-size="0.5px" 
 	  ></text> <!--велосипед -->
 	  <circle cx="2" cy="2" r="1.5"
 	  fill="none"
 	  stroke="red"
 	  stroke-width="0.1" 
 	  stroke-dasharray="1.49 9"
 	  stroke-dashoffset="-7.9" class="hover"/>
</g> 

 </svg>

3
  • спасибо, хорошее решение
    – ccxdec
    14 июл 2019 в 12:10
  • @MaximLensky И у меня было первое желание реализовать секторную, цветную обводку с помощью stroke-dasharray (+), но захотелось попробовать другие варианты 14 июл 2019 в 12:32
  • @Alexandr_TT да я люблю по проще ...без гемороя ...к примеру посмотри на hover у тебя в примере ...и поймёшь о чём я, а автор вопроса самостоятельно это не исправит ,иначе этого вопроса не задавал бы 14 июл 2019 в 12:33

Ваш ответ

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

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