主页 / 问题 / 891331
Accepted
Master Wenom
Asked:2020-10-10 19:37:07 +0000 UTC2020-10-10 19:37:07 +0000 UTC

如何以具有复杂形状段的圆形布局菜单？

  • 772

我不是 and 方面的专业人士CSS，JS但在这里您需要解决以下问题： 圆形菜单

对左边的元素感兴趣。我在片段中没有找到类似的东西（可能类似的元素以某种方式被某个名称调用）。
它应该是这样工作的：当您单击一个扇区时，它的大小会增加（如数字 1 所示），并且在右侧，信息会发生变化。
也许某处有类似的实现？

javascript

1 个回答

  1. Best Answer

    虽然第一部分

    在这里训练

        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 396">
    <g class="red">
        <path d="M 65.575894,283.98177 183.65971,154.16217 155.57143,72.378151 C 58.782665,95.809208 10.190442,191.8428 65.575894,283.98177 Z"
           style="fill:red;" />
        <text
           xml:space="preserve"
           style="font-size:44.77183914px;line-height:41.97360229px;font-family:Lato;fill:#ffffff;"
           x="46.749924"
           y="291.71173"
           id="text4522"
           transform="scale(1.2137117,0.8239189)"><tspan
             id="tspan4520"
             x="46.749924"
             y="291.71173"
             style="fill:#ffffff;fill-opacity:1;stroke-width:1.67894411">3</tspan></text>
        <text
           xml:space="preserve"
           style="font-size:20.5846405px;line-height:11.40928841px;font-family:Lato;fill:#ffffff;"
           x="100.70348"
           y="100.92748"
           id="text4534"
           transform="scale(0.79472758,1.2582928)"><tspan
             id="tspan4532"
             x="100.70348"
             y="100.92748"
             style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408">Lorem Ipsum </tspan><tspan
             x="100.70348"
             y="115.30096"
             style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408"
             id="tspan4536">is simply dummy</tspan><tspan
             x="100.70348"
             y="129.67444"
             style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408"
             id="tspan4538"> text of the printing </tspan><tspan
             x="100.70348"
             y="144.04791"
             style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408"
             id="tspan4540">and typesetting</tspan><tspan
             x="100.70348"
             y="158.42139"
             style="line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408"
             id="tspan4542"><tspan
       style="font-size:10.86598873px;fill:#ffffff;stroke-width:0.77192408"
       id="tspan4544"> industry</tspan>.</tspan></text>
      </g>
      
       <g class="green">
        <path
           style="fill:green;"
           d="M 293.67227,256.41544 122.37935,218.97533 65.575894,283.98177 c 68.557676,72.00645 175.940786,66.19474 228.096376,-27.56633 z" />
        <text
           xml:space="preserve"
           style="font-size:44.77183914px;line-height:41.97360229px;font-family:Lato;fill:#ffffff;"
           x="191.37885"
           y="345.22723"
           id="text4530"
           transform="scale(1.2137117,0.8239189)"><tspan
             id="tspan4528"
             x="191.37885"
             y="345.22723"
             style="fill:#ffffff;fill-opacity:1;stroke-width:1.67894411">2</tspan></text>
        <text
           transform="scale(1.0701775,0.93442444)"
           id="text4568"
           y="272.83636"
           x="105.10145"
           style="font-size:22.53310585px;line-height:12.48924828px;font-family:Lato;fill:#ffffff;"
           xml:space="preserve"><tspan
             style="font-size:11.89452267px;line-height:12.48924828px;fill:#ffffff;stroke-width:0.84499151"
             y="272.83636"
             x="105.10145"
             id="tspan4556">Lorem Ipsum </tspan><tspan
             id="tspan4558"
             style="font-size:11.89452267px;line-height:12.48924828px;fill:#ffffff;stroke-width:0.84499151"
             y="288.57037"
             x="105.10145">is simply dummy</tspan><tspan
             id="tspan4560"
             style="font-size:11.89452267px;line-height:12.48924828px;fill:#ffffff;stroke-width:0.84499151"
             y="304.30438"
             x="105.10145"> text of the printing </tspan><tspan
             id="tspan4562"
             style="font-size:11.89452267px;line-height:12.48924828px;fill:#ffffff;stroke-width:0.84499151"
             y="320.03842"
             x="105.10145">and typesetting</tspan><tspan
             id="tspan4566"
             style="line-height:12.48924828px;fill:#ffffff;stroke-width:0.84499151"
             y="335.77243"
             x="105.10145"><tspan
       id="tspan4564"
       style="font-size:11.89452267px;fill:#ffffff;stroke-width:0.84499151"> industry</tspan>.</tspan></text>
      </g>
      
      <g class="blue">
        <path
           style="fill:blue;"
           d="m 155.57143,72.378151 53.2437,167.218489 84.85714,16.63865 C 321.85558,160.72205 263.06041,70.57337 155.57143,72.378151 Z" />
        <text
           transform="scale(1.2137117,0.8239189)"
           id="text4526"
           y="143.28191"
           x="146.82492"
           style="font-size:44.77183914px;line-height:41.97360229px;font-family:Lato;fill:#ffffff;"
           xml:space="preserve"><tspan
             style="fill:#ffffff;fill-opacity:1;stroke-width:1.67894411"
             y="143.28191"
             x="146.82492"
             id="tspan4524">1</tspan></text>
        <text
           xml:space="preserve"
           style="font-size:20.5846405px;line-height:11.40928841px;font-family:Lato;fill:#ffffff;"
           x="251.44484"
           y="106.87792"
           id="text4582"
           transform="scale(0.79472758,1.2582928)"><tspan
             id="tspan4570"
             x="251.44484"
             y="106.87792"
             style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408">Lorem Ipsum </tspan><tspan
             x="251.44484"
             y="121.2514"
             style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408"
             id="tspan4572">is simply dummy</tspan><tspan
             x="251.44484"
             y="135.62488"
             style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408"
             id="tspan4574"> text of the printing </tspan><tspan
             x="251.44484"
             y="149.99835"
             style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408"
             id="tspan4576">and typesetting</tspan><tspan
             x="251.44484"
             y="164.37183"
             style="line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408"
             id="tspan4580"><tspan
       style="font-size:10.86598873px;fill:#ffffff;stroke-width:0.77192408"
       id="tspan4578"> industry</tspan>.</tspan></text>
      </g>
    </svg>

    第二部分是最后一个带有工作选项卡的部分（单击外部关闭所有选项卡）

    $("g.red").on("click", function() {
  $(this).css({
    "transform": "scale(1.1)translate(-40px,-30px)"
  });
  $(".blue,.green").removeAttr("style");
  $(".info1").show();
  $(".info2,.info3").hide();
});

$("g.blue").on("click", function() {
  $(this).css({
    "transform": "scale(1.1)translate(10px,-30px)"
  });
  $(".red,.green").removeAttr("style");
  $(".info2").show();
  $(".info1,.info3").hide();
});

$("g.green").on("click", function() {
  $(this).css({
    "transform": "scale(1.1)translate(10px,5px)"
  });
  $(".blue,.red").removeAttr("style");
  $(".info3").show();
  $(".info1,.info2").hide();
});

jQuery(function($) {
  $(document).mouseup(function(e) {
    var el = $("g");
    if (!el.is(e.target) &&
      el.has(e.target).length === 0) {
      el.removeAttr("style");
      $(".info").hide();

    }
  });
});
    svg {
  width: 450px;
  transform: translateY(-40px);
}

.items {
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.wrapper {
  display: flex;
}

.info1,
.info2,
.info3 {
  display: none;
  background: inherit;
}
    <div class="wrapper">
  <div class="items">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 420">
<g class="red">
    <path d="M 65.575894,283.98177 183.65971,154.16217 155.57143,72.378151 C 58.782665,95.809208 10.190442,191.8428 65.575894,283.98177 Z"
       style="fill:red;" />
    <text
       xml:space="preserve"
       style="font-size:44.77183914px;line-height:41.97360229px;font-family:Lato;fill:#ffffff;"
       x="46.749924"
       y="291.71173"
       id="text4522"
       transform="scale(1.2137117,0.8239189)"><tspan
         id="tspan4520"
         x="46.749924"
         y="291.71173"
         style="fill:#ffffff;fill-opacity:1;stroke-width:1.67894411">3</tspan></text>
    <text
       xml:space="preserve"
       style="font-size:20.5846405px;line-height:11.40928841px;font-family:Lato;fill:#ffffff;"
       x="100.70348"
       y="100.92748"
       id="text4534"
       transform="scale(0.79472758,1.2582928)"><tspan
         id="tspan4532"
         x="100.70348"
         y="100.92748"
         style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408">Lorem Ipsum </tspan><tspan
         x="100.70348"
         y="115.30096"
         style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408"
         id="tspan4536">is simply dummy</tspan><tspan
         x="100.70348"
         y="129.67444"
         style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408"
         id="tspan4538"> text of the printing </tspan><tspan
         x="100.70348"
         y="144.04791"
         style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408"
         id="tspan4540">and typesetting</tspan><tspan
         x="100.70348"
         y="158.42139"
         style="line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408"
         id="tspan4542"><tspan
   style="font-size:10.86598873px;fill:#ffffff;stroke-width:0.77192408"
   id="tspan4544"> industry</tspan>.</tspan></text>
  </g>
  
   <g class="green">
    <path
       style="fill:green;"
       d="M 293.67227,256.41544 122.37935,218.97533 65.575894,283.98177 c 68.557676,72.00645 175.940786,66.19474 228.096376,-27.56633 z" />
    <text
       xml:space="preserve"
       style="font-size:44.77183914px;line-height:41.97360229px;font-family:Lato;fill:#ffffff;"
       x="191.37885"
       y="345.22723"
       id="text4530"
       transform="scale(1.2137117,0.8239189)"><tspan
         id="tspan4528"
         x="191.37885"
         y="345.22723"
         style="fill:#ffffff;fill-opacity:1;stroke-width:1.67894411">2</tspan></text>
    <text
       transform="scale(1.0701775,0.93442444)"
       id="text4568"
       y="272.83636"
       x="105.10145"
       style="font-size:22.53310585px;line-height:12.48924828px;font-family:Lato;fill:#ffffff;"
       xml:space="preserve"><tspan
         style="font-size:11.89452267px;line-height:12.48924828px;fill:#ffffff;stroke-width:0.84499151"
         y="272.83636"
         x="105.10145"
         id="tspan4556">Lorem Ipsum </tspan><tspan
         id="tspan4558"
         style="font-size:11.89452267px;line-height:12.48924828px;fill:#ffffff;stroke-width:0.84499151"
         y="288.57037"
         x="105.10145">is simply dummy</tspan><tspan
         id="tspan4560"
         style="font-size:11.89452267px;line-height:12.48924828px;fill:#ffffff;stroke-width:0.84499151"
         y="304.30438"
         x="105.10145"> text of the printing </tspan><tspan
         id="tspan4562"
         style="font-size:11.89452267px;line-height:12.48924828px;fill:#ffffff;stroke-width:0.84499151"
         y="320.03842"
         x="105.10145">and typesetting</tspan><tspan
         id="tspan4566"
         style="line-height:12.48924828px;fill:#ffffff;stroke-width:0.84499151"
         y="335.77243"
         x="105.10145"><tspan
   id="tspan4564"
   style="font-size:11.89452267px;fill:#ffffff;stroke-width:0.84499151"> industry</tspan>.</tspan></text>
  </g>
  
  <g class="blue">
    <path
       style="fill:blue;"
       d="m 155.57143,72.378151 53.2437,167.218489 84.85714,16.63865 C 321.85558,160.72205 263.06041,70.57337 155.57143,72.378151 Z" />
    <text
       transform="scale(1.2137117,0.8239189)"
       id="text4526"
       y="143.28191"
       x="146.82492"
       style="font-size:44.77183914px;line-height:41.97360229px;font-family:Lato;fill:#ffffff;"
       xml:space="preserve"><tspan
         style="fill:#ffffff;fill-opacity:1;stroke-width:1.67894411"
         y="143.28191"
         x="146.82492"
         id="tspan4524">1</tspan></text>
    <text
       xml:space="preserve"
       style="font-size:20.5846405px;line-height:11.40928841px;font-family:Lato;fill:#ffffff;"
       x="251.44484"
       y="106.87792"
       id="text4582"
       transform="scale(0.79472758,1.2582928)"><tspan
         id="tspan4570"
         x="251.44484"
         y="106.87792"
         style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408">Lorem Ipsum </tspan><tspan
         x="251.44484"
         y="121.2514"
         style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408"
         id="tspan4572">is simply dummy</tspan><tspan
         x="251.44484"
         y="135.62488"
         style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408"
         id="tspan4574"> text of the printing </tspan><tspan
         x="251.44484"
         y="149.99835"
         style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408"
         id="tspan4576">and typesetting</tspan><tspan
         x="251.44484"
         y="164.37183"
         style="line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408"
         id="tspan4580"><tspan
   style="font-size:10.86598873px;fill:#ffffff;stroke-width:0.77192408"
   id="tspan4578"> industry</tspan>.</tspan></text>
  </g>
</svg>

  </div>
  <div class="informers">
    <div class="info info1">
      text1 text1 text1 text1 text1
    </div>
    <div class="info info2">
      text2 text2 text2 text2 text2 text2
    </div>
    <div class="info info3">
      text3 text3 text3 text3 text3 text3 text3
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    由于我不会写js，所以我是这样写的

    结果已经准备好了，如果stackoverflow public 有助于缩短js，它通常会超级

    • 4

相关问题