CSS clip-path不能使用path()拉伸

Question

我正在尝试使用具有path值的clip-path property。但是由于某些原因，裁剪并不能像使用HTML svg作为url()那样随元素缩放。

有没有办法让path()的行为像url()一样(拉伸剪辑)？

注意:我也尝试生成url-encoded svg并使用clip-path: url('data:image...')，但似乎不起作用

​

.heart {
  background: red;
  color: white;
  display: grid;
  place-content: center;
  width: 180px;
  height: 100px;
  margin: 30px auto;
}

.svg {
  clip-path: url(#myPath)
}

.path {
  clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z')
}

<div class="heart svg">With SVG</div>
<div class="heart path">With PATH</div>

<svg>
  <clipPath id="myPath" clipPathUnits="objectBoundingBox">
    <path d="M0.5,1
      C 0.5,1,0,0.7,0,0.3
      A 0.25,0.25,1,1,1,0.5,0.3
      A 0.25,0.25,1,1,1,1,0.3
      C 1,0.7,0.5,1,0.5,1 Z" />
  </clipPath>
</svg>

​

Answer 1

您可以通过将内容缩小到剪辑路径的大小，然后对其进行裁剪，然后再将其重新缩放来完成此操作

​

.heart {
    background: red;
    color: white;
    display: grid;
    place-content: center;
    width: calc(var(--desired-width) * 1px);
    height: calc(var(--desired-height) * 1px);
}
.heart-clip {
    clip-path: path("M0.5,1 C 0.5,1,0,0.7,0,0.3 A 0.25,0.25,1,1,1,0.5,0.3 A 0.25,0.25,1,1,1,1,0.3 C 1,0.7,0.5,1,0.5,1 Z");
    width: 1px;
    height: 1px;
}
.heart-scale-vars {
    --path-width: 1;
    --path-height: 1;
    --desired-width: 180;
    --desired-height: 100;
}
.scale-pre {
    transform: scale(
        calc(var(--path-width) / var(--desired-width)),
        calc(var(--path-height) / var(--desired-height))
    );
    transform-origin: top left;
}
.scale-post {
    transform-origin: top left;
    transform: scale(
        calc(var(--desired-width) / var(--path-width)),
        calc(var(--desired-height) / var(--path-height))
    );
}
.scale-postpost {
    width: calc(var(--desired-width) * 1px);
    height: calc(var(--desired-height) * 1px);
}

<div class="heart-scale-vars scale-postpost"><div class="scale-post heart-clip"><div class="scale-pre heart">With PATH</div></div></div>

​

或者通过使用url编码的svg作为掩码

​

.heart {
    background: red;
    color: white;
    display: grid;
    place-content: center;
    width: 180px;
    height: 100px;
}
.heart-mask {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M.5 1C.5 1 0 .7 0 .3A .25.25 1 1 1 .5.3A.25 .25 1 1 1 1 .3C1 .7 .5 1 .5 1Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M.5 1C.5 1 0 .7 0 .3A .25.25 1 1 1 .5.3A.25 .25 1 1 1 1 .3C1 .7 .5 1 .5 1Z'/%3E%3C/svg%3E");
}

<div class="heart heart-mask">With MASK</div>

​