标签: clip-path

我正在尝试使用SVG遮罩图像。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width=500 height=300>
    <defs>
    <clipPath id="clip">
    <path d="M2.16,1.363h23.699c13.739,0,24.899,10.74,24.899,23.999s-11.16...

<img width="500" style="clip-path: url(#clip);-webkit-clip-path: url(#clip);" />

它可以工作，但我希望clipPath大小与媒体匹配。在Chrome中，我可以使用CSS控制clipPath的大小，但在FF中，clipPath很小。在Safari中，一项资产没有任何显示，而另一项资产则偏离了中心。

我读过其他有关使用的问题clipPathUnits：

 <clipPath id="clip" clipPathUnits="objectBoundingBox">

但是我根本无法使它工作。显然，它期望路径单位为小数……但是我的形状太复杂了，无法手工编写，而且我不知道有任何支持该格式的设计软件。

更新资料

根据罗伯特的评论，我尝试将CS​​S转换添加到clipPath来“转换”单元...

    #clip {
        -webkit-transform:scale(0.004195862879,0.005554321262);
        transform:scale(0.004195862879,0.005554321262);
    }

这样可以objectBoundingBox在Chrome中按预期方式工作。但是使用Safari或FF仍然没有运气。似乎Safari仍会在要裁剪的元素外部渲染clipPath ...使其不可见。FF开发人员工具使其不清楚放置clipPath的位置。

我正在尝试采用复杂的路径形状并将其用作 css 中的剪辑路径蒙版，但我不知道如何让剪辑蒙版“填充”父容器。相反，它只是被切断或不会扩展以填充可用空间。

如果我添加clipPathUnits="objectBoundingBox"它根本不会出现。

<svg viewBox="0 0 720 720">
  <defs>
    <clipPath id="map">
      <path d="M568.421 326.842L511.579 270v37.895h-18.947v-18.948h-56.843v37.895l18.948 37.894v18.948h-18.948l37.896 56.842h-37.896l-18.947-18.948v-18.947h-37.895L360 383.684h-18.947l-18.948-37.894v-37.895L360 270l37.895-37.895-18.948-37.895H360v18.948l-18.947-18.948h-18.948v37.895h-37.894l-56.843-18.947-37.894-56.842h-56.842l-18.947-18.948-75.79 75.79v37.895h18.947v75.789L37.895 345.79l5.532 48.163 32.362 46.573 113.685 37.895 94.737 18.947h94.736v-18.947h37.895l18.947 37.895h18.948v56.842l56.842-37.894v-37.896h37.895l18.947-37.894v-37.896l56.842-37.894V345.79l-18.948-18.948z"/><path d="M246.315 194.21h56.843v-18.947l-18.947-37.895h-18.948v37.895h-18.948zM227.368 137.368h18.947v-18.947h-37.894V156.316h18.947zM341.053 175.263h56.842l37.894 37.895-18.947 18.947V270h75.79v-18.947h-37.895v-18.948h37.895V194.21h-37.895l-56.842-56.842h-56.842zM265.263 99.474h18.948v18.947h-18.948zM284.211 61.579h18.947v18.948h-18.947zM303.158 108.947h18.947v18.947h-18.947zM341.053 99.474h37.895v18.947h-37.895zM227.368 80.526h18.947v18.947h-18.947zM378.947 80.526V4.737H360l-37.895 37.894v18.948l18.948 18.947zM587.368 440.526h37.895v37.895h-37.895zM663.158 364.736V345.79h-18.947V402.631l56.842-18.947v-18.948zM378.947 270h18.947v18.947h-18.947zM644.211 421.578h18.947v18.948h-18.947zM644.211 459.474h18.947v18.947h-18.947z"/>
    </clipPath>
  </defs>
</svg>

https://codepen.io/picard102/pen/aEwJzR

我创建了一个带边框的语音气泡剪辑路径（非常重要）。现在我正在尝试使内容背景透明。

这是我目前的解决方案：

.background {
  background: url(https://thumbs.dreamstime.com/b/birch-forest-sunny-day-green-woods-summer-spring-landscape-43067305.jpg) no-repeat;
  background-size: cover;
  text-align: center;
}

.clip-svg {
  width: 0;
  height: 0;
}

.clip-wrap {
  display: inline-block;
  vertical-align: top;
  padding: 3px;
  background-color: #639;
  background-color: rebeccaPurple;
  clip-path: url("#speechebubble-clip");
}

.clip {
  width: 180px;
  height: 180px;
  position: relative;
  background: #fff;
}

.clip {
  clip-path: url("#speechebubble-clip");
}

<div class="background">
  <div class="clip-wrap">
    <div class="clip">
      test
    </div>
  </div>
</div>

<svg class="clip-svg">
 <defs>
  <clipPath id="speechebubble-clip" clipPathUnits="objectBoundingBox">
  <path width="100%" height="100%" transform="scale(0.0045, 0.00385)" id="clip-mask" d="M34.1983772,243.81581 C35.2123618,243.81581 36.0373744,244.643759 36.0373744,245.661353 L36.0373744,260 L63.450348,244.064408 C63.7301493,243.901754 64.0488773,243.81581 …

使用此代码，悬停效果有效，右下角消失但没有过渡，有什么问题吗？

.mydiv:hover{
      background-color: blue;
      clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
      transition: 0.5s ease;
 }

我正在尝试创建一个具有梯形形状的 Web 布局，如所附图像中所示。另外，每个部分都有一个background-image用cover或类似的结果填充背景。

第一部分（深蓝色）我只是使用skew和两个 div 实现的，如下所示。

但是，我无法创建以下部分，它向两个方向倾斜。我尝试使用clip-path没有运气。然后最后一部分需要再次平方。

HTML

<section id="my_section">
        <div id="my_section_bg"></div>
        <div id="my_section_content">
            <!-- any typical content, text/images here -->
        </div>
    </section>

CSS

#my_section {
    padding-top: 80px;
    padding-bottom: 90px;

    background-color: rgba(74,90,119,.5);

    transform: skewY(-4deg);
}

#my_section_bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: linear-gradient(
        to bottom,
        rgba(29,44,71,.85) 0%,
        rgba(29,44,71,1) 100%
        ), url("./assets/my_bg_img.jpeg");
    background-color: rgba(29,44,71,1);

    transform: skewY(8deg);
}

#my_section_content {
    transform: skewY(4deg); …

所以我一直试图为一些不同颜色的文本制作挥动动画,因为我正在使用<clipPath>和-webkit-clip-path.在.holderdiv包含在灰色彼此具有相同的文字,在一个白色,一个的顶部的两个元素,并且clip-path被施加到后面.

问题是我需要<path>坐标与文本的大小成比例.这是一个小提琴演示.

• 我试过设置一个viewBox="0 0 100 100",它不起作用.

• 我也试过使用,clipPathUnits="objectBoundingBox"但它似乎在这种情况下不起作用,我猜是因为文本是display:inline.

现在,如果这些似乎过于复杂的分析,并了解基本概念,并愿意做你的方式,去了,我是这样开在这一点上的建议.

另外,我试图避免JavaScript这样做,但如果你必须,继续,没问题:)

这是原始代码:

HTML

<div class="container">
    <div class="holder">
        <div class="back">Text</div>
        <div class="front">Text</div>
        <svg viewBox="0 0 100 100" preserveAspectRatio="none">
            <clipPath id="path">
                <path fill="transparent" stroke="black" >
                    <animate 
                        attributeName="d" 
                        attributeType="XML" 
                        values="M 0 50 Q 25 60, 50 50 T 100 50 L 100 100 L 0 100 Z;M 0 50 Q 25 40, 50 50 T …

我想向从容器创建的 ClipPath 添加阴影。这是我创建的 ClipPath：

              ClipPath(
                clipper: RibbonClipper(),
                child: Container(
                  height: 20,
                  width: 80,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(5.0),
                      bottomLeft: Radius.circular(5.0),
                    ),
                    color: Color(0xFF338D5E),
                  ),
                ),
              ), 

CustomClipper 路径是：

  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0, size.height);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width * .90, size.height * .5);
    path.lineTo(size.width, 0);
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

不确定这是否可行，所以我有一个备用计划（使用背景图像并:after用图像中的边框掩盖 3x 透明 PNG 之一，然后用于nth-child更改它们）。

这就是我想要实现的目标。我知道clip-path会给我图像蒙版，但我也需要弯曲边缘和边框颜色。我认为这在纯 CSS 中是不可能的。

我想在我的网页上添加画笔描边效果动画。我尝试使用转换，但没有成功。我希望画笔描边具有从左到右的擦除动画，以便它显示出来。任何人都可以建议这样做的方法吗？