如何使用剪辑路径删除剪辑的 DIV 之间不需要的间隙？

问题描述 投票：0回答：1

我正在尝试构建一种环形形式的选择菜单。 为此，我使用 CSS 剪辑路径。 到目前为止，切割各个零件是有效的，通过旋转排列各个部分也是如此。 但是，现在各个片段之间存在无法删除的间隙。 我怎样才能解决整个问题？附件是我的问题的代码笔：

https://codepen.io/eximos/pen/XWQRVez

#selectionwheel-container {
  width: 100vw;
  height: 100vh;
}

#selection-wheel {
  width: 600px;
  height: 600px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
 }

 .selection-wheel-item {
  width: 600px;
  height: 600px;
  position: absolute;
  left: 0px;
  top: 0px;
  background: rgba(0,0,0,0.85);
  clip-path: url(#sector);
 }

 .selection-wheel-item:not(.wheel-item-disabled):hover {
  background: rgba(90, 18, 18, 1.0);
  cursor: pointer;
}
<html>
    <body>
        <div id="selectionwheel-container">
            <div id="selection-wheel">
                <div class="selection-wheel-item"></div>
                <div class="selection-wheel-item" style="transform: rotate(60deg)"></div>
                <div class="selection-wheel-item" style="transform: rotate(120deg)"></div>
                <div class="selection-wheel-item" style="transform: rotate(180deg)"></div>
                <div class="selection-wheel-item" style="transform: rotate(240deg)"></div>
                <div class="selection-wheel-item" style="transform: rotate(300deg)"></div>
            </div>
        </div>

        <svg height="0" width="0">
            <defs>
                <clipPath clipPathUnits="objectBoundingBox" id="sector">
                    <path shape-rendering="optimizeSpeed" fill="none" stroke="#111" stroke-width="0" class="sector" d="M0.5,0.0 A0.5,0.5 0 0,1 0.9330127018922194,0.25 l-0.2165063509461097,0.125 A0.25,0.25 0 0,0 0.5,0.25 l0,-0.25"></path>
                </clipPath>
            </defs>
        </svg>
  </body>
</html>

HTML

<html>
    <body>
        <div id="selectionwheel-container">
            <div id="selection-wheel">
                <div class="selection-wheel-item"></div>
                <div class="selection-wheel-item" style="transform: rotate(60deg)"></div>
                <div class="selection-wheel-item" style="transform: rotate(120deg)"></div>
                <div class="selection-wheel-item" style="transform: rotate(180deg)"></div>
                <div class="selection-wheel-item" style="transform: rotate(240deg)"></div>
                <div class="selection-wheel-item" style="transform: rotate(300deg)"></div>
            </div>
        </div>

        <svg height="0" width="0">
            <defs>
                <clipPath clipPathUnits="objectBoundingBox" id="sector">
                    <path shape-rendering="optimizeSpeed" fill="none" stroke="#111" stroke-width="0" class="sector" d="M0.5,0.0 A0.5,0.5 0 0,1 0.9330127018922194,0.25 l-0.2165063509461097,0.125 A0.25,0.25 0 0,0 0.5,0.25 l0,-0.25"></path>
                </clipPath>
            </defs>
        </svg>
    </body>
</html>

CSS

#selectionwheel-container {
    width: 100vw;
    height: 100vh;
}

#selection-wheel {
    width: 600px;
    height: 600px;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
}

.selection-wheel-item {
    width: 600px;
    height: 600px;
    position: absolute;
    left: 0px;
    top: 0px;
    background: rgba(0,0,0,0.85);
    clip-path: url(#sector);
}

.selection-wheel-item:not(.wheel-item-disabled):hover {
    background: rgba(90, 18, 18, 1.0);
    cursor: pointer;
}
css svg clip-path
1个回答
0
投票

恐怕从那以后你就无能为力了
这些间隙是由不适合当前屏幕像素网格的像素引入的。

作为解决方法，您可以添加一个背景元素，用纯色/不透明颜色填充这些间隙。

事实上，我们正在添加一个像这样的“完整甜甜圈”剪辑路径并将其应用到父元素。

<clipPath clipPathUnits="objectBoundingBox" id="fullCircle">
<path 
d="M0.5 0
a 0.5 0.5 0 0 1  0 1
a 0.5 0.5 0 0 1  0 -1
m 0 0.25
a 0.25 0.25 0 0 0  0 0.5
a 0.25 0.25 0 0 0  0 -0.5" />
</clipPath>


#selectionwheel-container {
  width: 100vw;
  height: 100vh;
}

#selection-wheel {
  width: 600px;
  height: 600px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  background: rgba(0, 0, 0, 0.85);
  clip-path: url(#fullCircle);
}

.selection-wheel-item {
  width: 600px;
  height: 600px;
  position: absolute;
  left: 0px;
  top: 0px;
  background: rgba(0, 0, 0, 0.85);
  clip-path: url(#sector);
}

.selection-wheel-item:not(.wheel-item-disabled):hover {
  background: rgba(90, 18, 18, 1.0);
  cursor: pointer;
}
<html>

<body>
  <div id="selectionwheel-container">
    <div id="selection-wheel">
      <div class="selection-wheel-item"></div>
      <div class="selection-wheel-item" style="transform: rotate(60deg)"></div>
      <div class="selection-wheel-item" style="transform: rotate(120deg)"></div>
      <div class="selection-wheel-item" style="transform: rotate(180deg)"></div>
      <div class="selection-wheel-item" style="transform: rotate(240deg)"></div>
      <div class="selection-wheel-item" style="transform: rotate(300deg)"></div>
    </div>
  </div>

  <svg height="0" width="0">
            <defs>
      <!-- segment clip path -->
                <clipPath clipPathUnits="objectBoundingBox" id="sector">
                    <path shape-rendering="optimizeSpeed"
          d="M0.5,0.0 A0.5,0.5 0 0,1 0.9330127018922194,0.25 l-0.2165063509461097,0.125 A0.25,0.25 0 0,0 0.5,0.25 l0,-0.25" />
                </clipPath>
      <!-- background clip path -->
        <clipPath clipPathUnits="objectBoundingBox" id="fullCircle">
                <path 
                d="M0.5 0
                   a 0.5 0.5 0 0 1  0 1
                   a 0.5 0.5 0 0 1  0 -1
                   m 0 0.25
                   a 0.25 0.25 0 0 0  0 0.5
                   a 0.25 0.25 0 0 0  0 -0.5
                   " />
        </clipPath>
            </defs>
        </svg>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.