使用整个 SVG 的 CSS 剪辑路径答案

【问题标题】：CSS clip-path using an entire SVG使用整个 SVG 的 CSS 剪辑路径
【发布时间】：2019-01-02 21:13:44
【问题描述】：

我正在尝试使用 css 中的 clip-path 属性来掩盖网格中的模糊图像，基本上是为了获得您在 Windows 10 以及其他地方看到的玻璃模糊效果。

我的结构是：

<div>
    <div><img src="img/not_blurred.jpg"/></div>
    <div><img src="img/blurred.jpg"/></div>
    <div>
        <span>Some text</span>
    </div>
</div>

为了使模糊的图像覆盖包含“一些文本”的 div，同时保持与我正在考虑的下图的比例使用带有 SVG 的 SVG clipPath，该 SVG 覆盖包含“某些文本”的整个 div

<div>
    <div><img src="img/not_blurred.jpg"/></div>
    <div><img src="img/blurred.jpg"/></div>
    <div>
        <svg width="100%" height="100%">
            <defs>
                <clipPath id="test" clipPathUnits="objectBoundingBox">
                    <rect width="1" height="1"></rect>
                </clipPath>
            </defs>
        </svg>
        <span>Some text</span>
    </div>
</div>

但问题是剪辑路径没有以 SVG 的坐标 (0,0) 为原点，而是以页面的 (0,0) 为原点。如果你想看看，我已经为此创建了一支笔https://codepen.io/Kerruba/pen/MBveoW

可能我理解错了，但我尝试了在线文档并找不到答案。

任何帮助将不胜感激

【问题讨论】：

标签： css svg clip-path

【解决方案1】：

不幸的是，我无法按照我定义的方式找到任何解决此问题的方法。但是使用 JS 和多边形剪辑路径，我能够重新创建我正在寻找的效果。

这里如何：

HTML

<div class="grid glass">
    <div class="bg_normal">
        <img src="https://images.pexels.com/photos/991012/pexels-photo-991012.jpeg?cs=srgb&dl=above-aerial-aerial-view-991012.jpg&fm=jpg" alt="">
      </div>
      <div class="bg_blur">
        <img src="https://images.pexels.com/photos/991012/pexels-photo-991012.jpeg?cs=srgb&dl=above-aerial-aerial-view-991012.jpg&fm=jpg" alt="">
      </div>
      <div class="title">
        <h1>The greatest place ever!</h1>
      </div>
</div>

CSS

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.grid {
  min-width: 100vw;
  min-height: 100vh;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-auto-columns: unset;
  grid-gap: 0;
}


.bg_normal, .bg_blur {
  grid-row: 1 / -1;
  grid-column: 1;
}

.bg_normal img, .bg_blur img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bg_blur img{
   filter: blur(5px);
}

.title {
  grid-row: 2/-2;
  grid-column: 1;
  z-index: 1;
  background: rgba(200, 200, 200, 0.3);
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3vmax;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  font-family: 'Jura', sans-serif;
  text-shadow: 0 5px 10px HSL(172, 27%, 39%);
}

Javascript

function setClipPath(target, source) {
    let sbox = source.getBoundingClientRect();
    let [xmin, ymin, xmax, ymax] = [ sbox.left, sbox.top, sbox.right, sbox.bottom];
    target.style.clipPath = `polygon(${xmin}px ${ymin}px, ${xmin}px ${ymax}px, ${xmax}px ${ymax}px, ${xmax}px ${ymin}px
    )`;

}
let blur_background = document.querySelector(".glass .bg_blur");
let text_overlay = document.querySelector(".glass .title");

setClipPath(blur_background, text_overlay);

window.onresize = function(event) {
    setClipPath(blur_background, text_overlay);
}

这里我准备了一支笔来展示一下效果 https://codepen.io/Kerruba/pen/MBveoW?editors=0101

如果您对如何改进此问题或您发现的宏观问题有任何评论，请在评论中告诉我

【讨论】：