我尝试编写一个小插件,以更有机的方式打开模态框,因此我决定为clip-path属性设置动画.

现在这段代码仅适用于chrome:http://codepen.io/meodai/pen/GgGzYo？ edit = 011

看起来firefox不支持 polygon() clip-path属性.Safari和Mobile Safari也很难与之抗争.

有没有一种类似的简单方法可以在Firefox,Safari和Mobile Safari中使用它？知道我怎么能解决这个问题吗？

这是一个工作示例:

var $ov = $('.overlay');

$(document).on('click touchstart', '.inner', function(){
  var coords, coordArray, coordsString;

  coords = this.getBoundingClientRect();

  coordArray = [
    Math.floor(parseInt(coords.left)) + 'px ' + Math.floor(parseInt(coords.top)) + 'px',
    Math.ceil((parseInt(coords.left) + parseInt(coords.width))) + 'px ' + Math.ceil(parseInt(coords.top)) + 'px',
    Math.ceil((parseInt(coords.left) + parseInt(coords.width))) + 'px ' + Math.ceil((parseInt(coords.top) + parseInt(coords.height) )) + 'px',
    Math.ceil(parseInt(coords.left)) + 'px ' + Math.floor((parseInt(coords.top) + parseInt(coords.height) )) + 'px'
  ];


  coordsString = 'polygon(' …

我使用SVG作为图像的掩码,我正在尝试调整它的大小.我试着指示宽度和高度(到100),但它仍然没有缩放.只是保持相同的大小.

Codepen演示

这是SVG代码:

<svg height="100" width="100">
  <defs>
    <clipPath id="svgPath">
      <path fill="#EDEBEA" d="M468.855,234.292H244.117V9.439L468.855,234.292z" />
      <path fill="#EDEBEA" d="M6.864,8.939h224.73v224.733L6.864,8.939z" />
      <path fill="#EDEBEA" d="M244.118,469.73V245.005h224.737L244.118,469.73z" />
      <path fill="#EDEBEA" d="M231.594,245.005V469.73H6.863L231.594,245.005z" />
    </clipPath>
  </defs>
</svg>

我用它创建了一些直方图d3.js.我设法改变填充颜色rect取决于的位置brush.但我想改变一个内部的颜色rect.例如,如果brush start是在rect我想要的rect两个颜色的中间.

目前这就是我所拥有的:

这就是我想要的:

我见过像Here这样的例子.我是d3的新手,我试着理解代码.
我看到他们使用clip-path它肯定会隐藏背景栏,当他们没有画笔时,根据画笔的范围显示它们.

这是一个JS Bin

更新

我已经详细阅读了链接中提供的代码.我发现他们不创建<rect>元素来制作图表,但是barPath如下:

function barPath(groups) {
        var path = [],
            i = -1,
            n = groups.length,
            d;
        while (++i < n) {
          d = groups[i];
          path.push("M", x(d.key), ",", height, "V", y(d.value), "h9V", height);
        }
        return path.join("");
      }

但我没有事件了解这个函数中发生了什么,以及如果他们没有其他方法可以做到这一点,如何点对它.

之前已经有人问过这个问题，但只是z-index在 CSS 中明确定义了。

我试图在标题上使用剪辑路径，然后从该标题顶部下方的元素内拉出图像。但是，一旦我clip-path在标题上定义了 a ，图像（它应该位于堆叠顺序的较高位置，因为它稍后出现在代码中）就会位于标题下方：

body {
  padding: 1em;
}

header {
  background: #a00;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5em), 0 100%);
}

h1 {
  margin: 0;
  padding: 2em;
  font: 300%;
  color: white;
  text-align: center;
}

section {
  background: #ccc;
  padding-top:5em;
  margin-top:-5em;
}

img {
  margin-top: -10em;
  
}

<header>
  <h1>Header Content</h1>
</header>

<section>
  <img src="https://via.placeholder.com/330/0000FF/808080"/>
</section>

我希望图像位于标题上方。经过更多尝试后，我发现如果我position:relative在图像上设置 - 它会起作用：

body {
      padding: 1em;
    }

    header { …

我正在尝试使用剪辑路径多边形属性获取形状，但它没有按预期工作，我想要制作的形状如下所示

我尝试了以下代码，但它给出的角不是圆形

`
#header {
  width: 100%;
  height: 95vh;
  background: linear-gradient(110deg, #2186eb, #37dce2);
  clip-path: polygon(100% 0, 100% 51%, 65% 88%, 57% 96%, 50% 100%, 43% 96%, 24% 87%, 0 51%, 0 0); 
}
`

如何降低div中文本的不透明度,如下所示:

是否可以创建插入圆形剪切路径，以使剪切路径可以有效地穿过div中心的孔，而不是仅显示中心？

应该将div的所有部分分开显示，并在中心切出一个孔以创建如下所示的内容：

我想使用剪切路径或类似的东西，这样我就可以在div后面添加一些东西（图像和内容），并且使用剪切路径来揭示这一点。因此，div（我的jsfiddle中的蓝色div）将通过过渡以显示其背后的内容从中心消失。

div {
  background: blue;
  width: 200px;
  height: 200px;
  -webkit-clip-path: circle(50px at center);
}

<div></div>

https://jsfiddle.net/pm4yvbxn/

我试图在双色标题上实现黑白文本的这种效果，该标题的一侧始终为白色，另一侧为背景图像（不同颜色）。

这是用于此示例的 css，它仅在图像具有纯黑色背景时才起作用：

.text {
  position: relative;
  color: rgb(255, 255, 255);
  mix-blend-mode: difference;
  text-transform: uppercase;
  font-size: 60px;
}

如果背景图像没有纯黑色背景，这将不起作用：

在这种情况下，我得到了我应该得到的，但我想要的是在左侧获得白色文本，在右侧获得黑色文本，如第一个示例所示。

我一直在尝试 css filter，mix-blend-modess ，clip-paths ，我见过这个https://aerolab.github.io/midnight.js/（它不适合我的情况）但我总是得到错误的结果。您是否知道一种制作黑色/白色文本的方法，该文本可以识别白色背景并使文本变为黑色，而任何不是纯白色背景的内容，请将颜色切换为白色？

我希望我的解释清楚，任何解决方案甚至线索都非常受欢迎，即使它需要 javascript。谢谢你！

这是一个带有示例的代码笔：https ://codepen.io/vlrprbttst/pen/jOPMzvd?editors = 1100

非常感谢！

我想创建一个类似于以下的倒置边框半径：

然而，由于box-shadow. 我尝试了很多解决方案，例如使用box-shadowinset 或过滤器，drop-shadow但clip-path没有很好的效果。

我在这一点上：

body {
  height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: white;
}

.wrapper {
  width: 100%;
  //filter: drop-shadow(0 0 2rem #0000005c);
}

.header {
   background-color: #efefef;
   width: 85%;
   aspect-ratio: 16/3;
   border-radius: 1.5rem;
   border: 1px solid #d0d0d0;
   box-shadow: 0 0 2rem #0000005c;
  position: relative;
  margin: 0 auto;
  //clip-path: url(#myClip);
}

.dashed {
    width: 100%;
    position: absolute;
    top: 50%;
    border-bottom: 1px dashed black;
}

  
  .dashed:after {
    content: ''; …

我有一个剪辑路径，可以切割某种形状。问题是它是用绝对坐标设置的。如果我把 % 放在那里，它就会崩溃。如何缩放它使其适合画布边框并与画布一起拉伸？

.canvas {
    width: 200px;
    height: 200px;
    background-color: black;
}

.clip {
    width: 100%;
    height: 100%;

    background-color: orange;
    content: "";
    clip-path: path('M 100 50 A 75 75 0 0 1 0 50 A 75 75 0 0 1 100 50 z');
 }

<div class="canvas"><div class="clip">sadf</div></div>