标签: clip-path

我创建了一个剪辑路径，可在页面中的多个 div 上重复使用。我使用属性 ClipPathUnits="objectBoundingBox" 使其根据其位置应用于每个 div。它在 Chrome 和 Firefox 中运行良好。当我在 safari 中尝试它时，它仅基于第一个 div 起作用。这意味着它第一次运行得很好，而不是当我再次调用它时，boudingbox 仍然基于第一个 Div。当我给第二个 div 提供负边距直到它与第一个部分重叠然后我可以看到它时，我意识到了这一点。

以下是该问题的示例：

.bar {
  height: 100px;
  width: 100px;
}
.block {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: white;
  z-index: 100;
  display: block;
  clip-path: url(#clipping);
  -webkit-clip-path: url(#clipping);
}

<svg style="background: blue; height: 0px; overflow: hidden;">
  <defs>
    <clipPath id="clipping" clipPathUnits="objectBoundingBox">
      <path fill="#FFFFFF" d="M0.501,0.971c-0.014,0-0.027-0.003-0.04-0.011l-0.34-0.194c-0.024-0.014-0.04-0.041-0.04-0.069L0.081,0.306
	c0-0.028,0.015-0.055,0.04-0.069L0.458,0.04c0.013-0.007,0.026-0.011,0.04-0.011s0.027,0.003,0.04,0.011l0.339,0.194
	c0.025,0.014,0.041,0.041,0.041,0.069l0.001,0.391c0,0.028-0.015,0.055-0.04,0.069L0.542,0.96C0.529,0.968,0.515,0.971,0.501,0.971z
	" />
    </clipPath>
  </defs>
</svg>

<div class="bar" style="background: blue;">
  <div class="block">
  </div>
</div>
<div class="bar" style="background: green;"> …

我有一个网页,我在其中使用应用于页面的HTML元素之一的SVG剪辑路径.

SVG元素:

<svg height="0" width="0">
    <defs>
        <clipPath id="clip">
            <path d="M150 0 L75 200 L225 200 Z" />
        </clipPath>
    </defs>
</svg>

应用剪切路径的HTML元素

<div id="clipMe"> </div>

定义剪辑的CSS

#clipMe {
    clip-path: url(#clip);
    -webkit-clip-path: url(#clip);
    width: 200px;
    height: 200px;
    background-color: red;
}

在同一页面上,我有各种各样的元素,其中一些相对定位:

<div style="position: relative">
    <strong>My parent is relative</strong>
</div>

仅在Safari(8.0.4)中,只要从#clipMediv到clipPath(在SVG元素内)的链接完好无损,就不会显示这些相对定位的元素.

最新版本的FF和Chrome按预期显示.

将position:属性更改为除relative之外的任何内容都会按预期显示所有内容

禁用剪切路径(通过一起删除SVG元素或clip-path:从CSS中删除属性)也会按预期显示所有内容.

的jsfiddle:

同样,这只是Safari.我花了一段时间将它隔离到关于SVG剪切路径,position: relative所以我猜测可能有其他类似结果的情况.

有没有人遇到这个或有任何建议让这些相对定位的s显示？

编辑
这可能是一个Mac的东西.虽然它在OSX中的Chrome和Firefox中显示为预期,但它不会在iOS上的任何浏览器中显示相对定位的DIV.

有任何想法吗？

实现SVG精灵时,<svg>会创建一个元素,并通过该<use>元素引用svg元素.<svg>然后使用隐藏包含元素style="display: none;"

clip-Path属性不会渲染,但路径会渲染.这使我的路径看起来与我想要的路径不同.

如何使用<use xlink:href="#"/>带剪辑路径引用元素的svg ？

我使用grunt-svg-store来创建我的svg sprite,但是已经简化了Q&A格式的这个例子https://css-tricks.com/svg-sprites-use-better-icon-fonts/

<svg id="svg-test" style="display: none;">
  <clipPath id="my-clip-1">
    <circle id="circle-1" cx="50" cy="50" r="50" />
  </clipPath>
  <path id="svg-test-reference" clip-path="url(#my-clip-1)" d="M10-39.288h80v80H10z" />
</svg>

<!-- Reference SVG <path> by ID with Use -->

<svg class="svg-item" viewBox="0 0 100 100">
  <use xlink:href="#svg-test-reference" />
</svg>

Codepen.io上的实例

我正在使用 SVG，想看看是否可以将 SVG 存储在外部文件中并使用 调用它url(link)，因为 FireFox 在 CSS 中声明形状时不支持剪辑路径。

但是，当链接到外部文件时，剪辑根本不起作用。

这是在同一文档中包含和引用的 SVG 的小提琴。

<img src="http://sarasoueidan.com/demos/css-svg-clipping/html-img-clipped-with-css-svg-clippath/flowers.jpg" style="clip-path: url(#svgPath); -webkit-clip-path: url(#svgPath)" />

<svg height="0" width="0">
    <defs>
        <clipPath id="svgPath">
            <path  stroke-width="1.5794" stroke-miterlimit="10" d="M215,100.3c97.8-32.6,90.5-71.9,336-77.6
        c92.4-2.1,98.1,81.6,121.8,116.4c101.7,149.9,53.5,155.9,14.7,178c-96.4,54.9,5.4,269-257,115.1c-57-33.5-203,46.3-263.7,20.1
        c-33.5-14.5-132.5-45.5-95-111.1C125.9,246.6,98.6,139.1,215,100.3z"/>
        </clipPath>
    </defs>
</svg>

但是当我将它托管在我的服务器上时包含它时，它不起作用。看看这个小提琴。

<img src="http://sarasoueidan.com/demos/css-svg-clipping/html-img-clipped-with-css-svg-clippath/flowers.jpg" style="clip-path: url(rvervuurt.com/svg.html#svgPath); -webkit-clip-path: url(rvervuurt.com/svg.html/#svgPath)" />

url(#svgPath)在这种情况下，我不明白和之间有什么区别url(external.com/#svgPath)。应该以不同的方式包含它吗？

更新：我尝试将其添加为.svg文件，但似乎不起作用。小提琴。有人可以检查 .svg 吗？形状看起来与 Illustrator 中应有的形状相同。

我使用SVG元素创建了一个相当简单的形状，然后使用将该元素放入CSS中clip-path。它应该使拐角对我来说是圆的，但是由于某些原因，只有一个拐角可以完美地实现效果。

这是形状：

<svg height="500" width="500">

  <path fill="#555555" d="M50,0 L450,0 Q500,0 500,50 L500,400 Q500,450 450,450 L200,450 L175,500 L150,450 L50,450 Q0,450 0,400 L0,50 Q0,0 50,0z" />

</svg>

这是当我将其用作 clip-path

body {
  background: #555;
}
img {
  clip-path: url(#svgPath);
  -webkit-clip-path: url(#svgPath);
}

<svg height="0" width="0">
  <defs>
    <clipPath id="svgPath">
      <path fill="#FFFFFF" d="M50,0 L450,0 Q500,0 500,50 L500,400 Q500,450 450,450 L200,450 L175,500 L150,450 L50,450 Q0,450 0,400 L0,50 Q0,0 50,0z" />
    </clipPath>
  </defs>
</svg>

<img src="http://lorempixel.com/500/500/" />

在FireFox中，它似乎可以完美工作，但显示在Chrome中，除右下角外，角落未正确切割。

我正在尝试使用clip-path.

#clip span {
  padding: 3px 20px;
  background-color: #666;
  color: white;
  display: inline-block;
  clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%);
}

<div id="clip">
  <span>hello</span><span>tiny</span><span>world</span><span>welcome!</span>
</div>

这使

虽然我喜欢这种方法的简单性，但问题来自坐标90%，它与单词的长度有关。因此“欢迎！” 没有与“tiny”相同的箭头角度。

当然，我可以在坚持前后跨度的单词之间添加两个空白块，根据需要调整形状。

但是有没有办法为 a 指定类似于 X-Windows 的“几何”坐标样式的polygon东西，例如-10px（从元素的右侧/底部开始计数；因此对于 100px 元素，这将给出 90px，意味着 10px从元素的另一侧）？

因此，“几何”之类的规则类似于（在 css 中不起作用，因为 -10px 从左侧/顶部开始计数）

clip-path: polygon(0 0, -10px 0, 100% 50%, -10px 100%, 0 100%, 10px 50%);

我有一个CSS属性剪辑路径的图像.我添加了动画来旋转剪辑路径.我想只旋转剪辑路径,而不是图像.从下面的代码中,您可以了解我想要实现的目标.我这样做是为了让你知道我想要达到的目标.我的代码的问题是在每个关键帧上手动设置剪辑路径点需要花费大量时间.那么是否有任何简短的方法来实现以下代码结果而无需在关键帧上手动更改点数？我希望它很流畅,这很难通过手动设置点来设置.(请记住,我不需要那个使图像不可见的最后一个动画,我无法弄清楚它为什么会发生.

#profile-img {
    width: 15%;
    margin: 5%;
    -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
    clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
    animation: clipRotateAnim 2s linear infinite;
}

@keyframes clipRotateAnim {
    0% {
        -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% …

我正在尝试使用HTML和CSS创建“眨眼”动画。

我想要的是，当眨眼时，眼球没有显示出来。

从代码中可以看到，眼睛由4个元素组成。

Div“眼睛”是眼睛所在的容器。

Div“ eye1”和“ eye2”。

Div“眼罩”，具有闪烁效果。

Div“眼球1”和“眼球2”。这些应仅显示在“眼罩”的顶部，而不应显示在“ eye1”和“ eye2”的顶部。

有人可以帮我实现这一目标吗？

body {
  margin: 0px;
}

#container {
  position: absolute;
  z-index: 100;
  width: 300px;
  height: 300px;
  background: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
}

#eyes {
  position: absolute;
  z-index: 12;
  width: 120px;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#eye1,
#eye2 {
  z-index: 12;
}

#eye1,
#eye2,
#eyemask {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: circle(50% …

我知道如何对直接在 CSS 中定义的剪辑路径进行动画处理，但我不明白当从 SVG ClipPath 元素引用剪辑路径时如何执行此操作。

我一直在尝试仅使用 CSS 制作简单的剪辑路径动画，直到我意识到无法直接将复合路径定义为剪辑路径，因此我转向了 SVG 的允许定义多个路径的 ClipPath。但是这样动画就不行了，就是没有平滑过渡。

这就是我正在尝试的...

超文本标记语言

<svg>
    <defs>
        <clipPath id="shape--start">
            <polygon points="0,100 22.222,133.333 8.333,147.222 -13.889,113.889 -47.222,91.667 -33.333,77.778"/>
        </clipPath>
        <clipPath id="shape--end">
            <polygon points="144.444,-44.444 166.667,-11.111 152.778,2.778 130.556,-30.556 97.222,-52.778 111.111,-66.667"/>
        </clipPath>
    </defs>
</svg>

CSS

@keyframes shape {
    0% { clip-path: url(#shape--start) }
    100% { clip-path: url(#shape--end) }
}

为了澄清更多，如果我使用类似的东西

CSS

@keyframes shape {
    0% { clip-path: polygon(-44% 5%, -14% 5%, 15% 95%, -15% 95%) }
    100% { clip-path: polygon(90% 5%, …

我需要使用自定义形状 SVG 来遮盖图像（它就像一个拱门，如下图所示）。下面是带有 SVG 形状路径的实际代码：

    img {
      clip-path: path('M451.715 154.05C451.79 152.468 451.828 150.88 451.828 149.286C451.828 66.8376 350.683 0 225.914 0C101.145 0 0 66.8376 0 149.286C0 150.88 0.0378114 152.468 0.112874 154.05H0V536H451.828V154.05H451.715Z');
    }

这是原始的 SVG：

<svg width="452" height="536" viewBox="0 0 452 536" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M451.715 154.05C451.79 152.468 451.828 150.88 451.828 149.286C451.828 66.8376 350.683 0 225.914 0C101.145 0 0 66.8376 0 149.286C0 150.88 0.0378114 152.468 0.112874 154.05H0V536H451.828V154.05H451.715Z" fill="#FF0809"/>
</svg>

这似乎可行，但我需要将形状置于图像的中心，并且必须保持其比例（不拉伸）。下面我附上一张图片，其中的细节比文字更能解释。

任何想法？