第二个 Instagram 按钮的 CSS 属性

Question

axmed2004

Asked:2020-08-20 01:53:24 +0000 UTC2020-08-20 01:53:24 +0000 UTC 2020-08-20 01:53:24 +0000 UTC

如何在 SVG 或 CSS 中绘制操纵杆控制面板？

772

如何画出这样的操纵杆？所有 8 个按钮和中心应该是可点击的

2 个回答

Voted

Alexandr_TT · Answer 1 · 2020-09-01T03:38:27Z

可以使用一个脚本，根据给定的参数，将圆分成给定数量的段。例如，分成 8 段，如问题中一样，但是......

<style>
svg {
  height: 220px;
  width: 220px;
}
path {
  fill:#797979;
  stroke: black;
}
</style>
<svg viewBox="0 0 110 110" id="pie"></svg>

<script>
var fromAngle, toAngle, fromCoordX, fromCoordY, toCoordX, toCoordY, path, d;

function createPie(cx, cy, r, slices) {
  for (var i = 0; i < slices; i++) {
    path = document.createElementNS("http://www.w3.org/2000/svg", "path");
    fromAngle = i * 360 / slices;
    toAngle = (i + 1) * 360 / slices;
    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);
  }
}

createPie(55, 55, 50, 8);
</script>

所有 8 个按钮和中心应该是可点击的

因此，我必须将所有 8 个段分别制作成单独的段，path以便在单击时链接可以正常工作。

这些链接在 stackoverflow.com中工作，因此该代码段允许您导航。
如果您将光标停留在段上一会儿，标签提供的提示就会出现。<title>

<a xlink:href="https://ru.stackoverflow.com/questions"> 
    <title> Все вопросы </title>
  <path id="s1"  d="M 55 55 L 105 55 A 50 50 0 0 1 90.35 90.35 Z"/>
</a>

为了在悬停时创建视觉效果， transitionSVG 过滤器也用于增加音量。

<filter id="drop-shadow" x="-20%" y="-20%" height="130%" width="130%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2"/> 
      <feOffset dx="1" dy="0" result="offsetblur"/> 
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>

代码中的要点有注释，希望对你有帮助

svg {
  height: 330px;
  width: 330px;
  --d:dodgerblue;
  --r:red;
  --g:yellowgreen;
}

#spot {
  fill:white;
  pointer-events:none;
  }
 #arrow {
 fill:none;
 stroke:white;
 stroke-width:2;
 pointer-events:none;
 } 

#center {
fill:#797979;
stroke:#FFFFFF;
stroke-width:3;
cursor: pointer; 
-webkit-transition: all 0.8s ease;
  transition: all 0.8s ease;

} 
#center:hover {
fill: var(--g);
filter:url(#drop-shadow);
}

#s1,#s3, #s5, #s7 {
fill:#3A3A3A;
cursor: pointer; 
 -webkit-transition: all 0.8s ease;
  transition: all 0.8s ease;
}

#s2,#s4,#s6,#s8 {
fill:#797979;
cursor: pointer; 
-webkit-transition: all 0.8s ease;
  transition: all 0.8s ease;
}


#s1:hover, #s3:hover, #s5:hover, #s7:hover  {
 fill: var(--d);
 filter:url(#drop-shadow);
}
#s2:hover, #s4:hover, #s6:hover, #s8:hover  {
 fill: var(--r);
 filter:url(#drop-shadow);
}

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox='0 0 110 110'> 
    <defs>  
     <!-- Фильтр для создании тени при наведении -->
<filter id="drop-shadow" x="-20%" y="-20%" height="130%" width="130%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2"/> 
      <feOffset dx="1" dy="0" result="offsetblur"/> 
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
</defs> 
  <!-- Сегменты окружности с рабочими ссылками Переход по клику -->
<g transform="rotate(-22.5 55 55)" >
<a xlink:href="https://ru.stackoverflow.com/questions"> 
    <title> Все вопросы </title>
  <path id="s1"  d="M 55 55 L 105 55 A 50 50 0 0 1 90.35 90.35 Z"/>
</a>
    <a xlink:href="https://ru.stackoverflow.com/questions/tagged/javascript"> 
        <title> Все вопросы по javascript </title>
      <path id="s2"  d="M 55 55 L 90.35 90.35 A 50 50 0 0 1 55 105 Z"/>
     </a> 
    
<a xlink:href="https://ru.stackoverflow.com/questions/tagged/svg">
    <title> Все вопросы по SVG </title>
<path id="s3"  d="M 55 55 L 55 105 A 50 50 0 0 1 19.6447 90.35 Z" />
</a>
    <a xlink:href="https://ru.stackoverflow.com/questions/tagged/css"> 
       <title> Все вопросы по CSS </title>
    <path id="s4"  d="M 55 55 L 19.64 90.353 A 50 50 0 0 1 5 55 Z" />
    </a>
<a xlink:href="https://ru.stackoverflow.com/questions/tagged/java"> 
     <title> Все вопросы по java </title>
<path id="s5"  d="M 55 55 L 5 55 A 50 50 0 0 1 19.64 19.64 Z" />
</a> 
    <a xlink:href="https://ru.stackoverflow.com/questions/tagged/python">
       <title> Все вопросы по python </title>
    <path id="s6"  d="M 55 55 L 19.64 19.64 A 50 50 0 0 1 55 5 Z" />
    </a> 
<a xlink:href="https://ru.stackoverflow.com/help"> 
     <title> Справочный раздел </title> 
<path id="s7"  d="M 55 55 L 55 5 A 50 50 0 0 1 90.35 19.64 Z" />
</a>
    <a xlink:href="https://ru.stackoverflow.com/questions/tagged/php"> 
        <title> Все вопросы по php  </title>
    <path id="s8"  d="M 55 55 L 90.35 19.64 A 50 50 0 0 1 105 55 Z" />
    </a>
</g>  
      <a xlink:href="https://ru.stackoverflow.com/questions/tagged/html"> 
        <title> Все вопросы по HTML </title> 
     
  <circle id="center" cx='55' cy='55' r='17'  /> 
  </a>
      <!-- Белые круги -->
    <circle id="spot" cx='31' cy='31' r='6'   />  
     <use xlink:href="#spot" transform="rotate(90 55 55)" /> 
         <use xlink:href="#spot" transform="rotate(-90 55 55)" />
          <use xlink:href="#spot" transform="rotate(180 55 55)" />
  <!--Белые стрелки --> 
    <polyline id="arrow" points = "46,21 55,12 64,21" fill="none" stroke="white" />   
       <use xlink:href="#arrow" transform="rotate(90 55 55)" /> 
         <use xlink:href="#arrow" transform="rotate(-90 55 55)" />
          <use xlink:href="#arrow" transform="rotate(180 55 55)" />
      
</svg>

De.Minov · Answer 2 · 2020-09-01T18:04:27Z

为了好玩，CSS版本

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  margin: 0;
}

.cir {
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #797979;
  position: relative;
  overflow: hidden;
}

.cir .seg {
  width: 50%;
  height: 35%;
  top: 50%;
  left: 50%;
  transform-origin: bottom right;
  transform: translate(-100%,-100%) rotate(var(--seg-r)) skewX(calc(360deg / 8));
  position: absolute;
}

.cir .center {
  display: block;
  width: 35%;
  height: 35%;
  border-radius: 50%;
  border: 5px solid #fff;
  background: #797979;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.cir .seg:nth-child(1) {--seg-r: 65deg;}
.cir .seg:nth-child(2) {--seg-r: 110deg;}
.cir .seg:nth-child(3) {--seg-r: 155deg;}
.cir .seg:nth-child(4) {--seg-r: 200deg;}
.cir .seg:nth-child(5) {--seg-r: 245deg;}
.cir .seg:nth-child(6) {--seg-r: 290deg;}
.cir .seg:nth-child(7) {--seg-r: 335deg;}
.cir .seg:nth-child(8) {--seg-r: 20deg;}

.cir .seg:nth-child(odd) {background: #3a3a3a;}
.cir .seg:nth-child(even) {background: #797979;}

.cir .seg:nth-child(odd):hover {background: dodgerblue;}
.cir .seg:nth-child(even):hover {background: red;}
.cir .center:hover {background: yellowgreen;}

.cir .seg::before {
  width: 24px;
  height: 24px;
  content: '';
  display: block;
  transform: skewX(calc(360deg / -8)) rotate(-65deg);
  position: absolute;
  right: 29px;
  bottom: 17px;
}

.cir .seg:nth-child(odd)::before {
  background: url('http://pandora.clan.su/up-arrow.svg') no-repeat center center / contain;
}

.cir .seg:nth-child(even)::before {
  border-radius: 50%;
  background: #fff;
}

<div class="cir">
  <a href="#" class="seg" title="N"></a>
  <a href="#" class="seg" title="NE"></a>
  <a href="#" class="seg" title="E"></a>
  <a href="#" class="seg" title="SE"></a>
  <a href="#" class="seg" title="S"></a>
  <a href="#" class="seg" title="SW"></a>
  <a href="#" class="seg" title="W"></a>
  <a href="#" class="seg" title="NW"></a>
  <a href="#" class="center" title="C"></a>
</div>

UPD：
应@Alexandr_TT的要求，我制作了“按钮”链接并添加了工具提示。

如何在 SVG 或 CSS 中绘制操纵杆控制面板？

如何从列表中打印最大元素（str 类型）的长度？

如何在 PyQT5 中清除 QFrame 的内容

如何将具有特定字符的字符串拆分为两个不同的列表？

导航栏活动元素

是否可以将文本放入数组中？[关闭]

如何一次用多个分隔符拆分字符串？

如何通过 ClassPath 创建 InputStream？

在一个查询中连接多个表

对列表列表中的所有值求和

如何对齐 string.Format 中的列？

如何在 SVG 或 CSS 中绘制操纵杆控制面板？

2 个回答

相关问题