SVG 显示剪裁边缘答案

【问题标题】：SVG shows clipped edgeSVG 显示剪裁边缘
【发布时间】：2021-12-24 04:58:53
【问题描述】：

我可以使用原生 SVG 语法或在 CSS 中做些什么来修复这个剪裁的边缘不会出现在我的 SVG 中？

body {
  margin: 0;
  background: #fff;
  text-align: center;
}
#profile-pic {
  width: 33%;
}
#profile-pic text {
  font-size: 48px;
  font-family: monospace;
  font-weight: bold;
  fill: #000;
  -webkit-animation: raise 1s linear infinite alternate;
          animation: raise 1s linear infinite alternate;
}
@-webkit-keyframes raise {
  from { transform: translateY(-10px); }
  to { transform: translateY(10px); }
}
@keyframes raise {
  from { transform: translateY(-10px); }
  to { transform: translateY(10px); }
}

<svg id="profile-pic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
  <title>Brandon McConnell</title>
<defs>
  <clipPath id="imageClipPath"><circle cx="250" cy="250" r="116" fill="#FFFFFF" /></clipPath>
</defs>
    <text dy="70" textLength="500">Lorem Ipsum</text>
    <image
    href="https://s.gravatar.com/avatar/6e25e38e140dda7ac64f7865b3df77ab?s=500"
    clip-path="url(#imageClipPath)"
    width="240"
    height="240"
         x="130"
         y="130"
  />
</svg>

我在最新版本的 Chrome 中看到了这一点。截图：

系统规格

MacBook Pro (Retina, 15-inch, Late 2013)
macOS Big Sure - Version 11.6.1 (20G224)
Google Chrome - Version 95.0.4638.69 (Official Build) (x86_64)

【问题讨论】：

在我的 WIndows10 笔记本电脑上，我在 Chrome/Edge 或 Firefox 上看不到该边框。您是否在不同的缩放级别看到它？
是的，我测试并在 50%、100% 和 150%（和其他）缩放时看到它
你使用的是什么操作系统？
@AHaworth 更新了我的问题以包括我的系统规格。谢谢。
谢谢。现在随着 Lorem Ipsum 的上下弹跳，我看到了这些线条（WIndows10 Chrome/Edge）。

标签： html css svg

【解决方案1】：

我确实看到了你提到的神器。我发现删除这个：

#profile-pic, #profile-pic * {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

摆脱它。

body {
  margin: 0;
  background: #fff;
  text-align: center;
}

#profile-pic {
  width: 50%;
}

<svg id="profile-pic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
  <defs>
    <clipPath id="imageClipPath"><circle cx="250" cy="250" r="116" fill="#FFFFFF" /></clipPath>
  </defs>
    <image
    href="https://s.gravatar.com/avatar/6e25e38e140dda7ac64f7865b3df77ab?s=500"
    clip-path="url(#imageClipPath)"
    width="240"
    height="240"
    x="130"
    y="130"
  />
</svg>

【讨论】：

我仍然可以在您的示例中看到剪裁边缘，与我的相同。这个剪裁的边缘没有使用backface-visibility，所以我会从我的问题中删除它。
@BrandonMcConnell - 请再次检查。我刚刚编辑过。
嘿，Rob，感谢您的编辑，但正如我所提到的，这仍然出现在我身上，没有任何使用 backface-visibility。我相信这可能与我使用transform 和animation 关键帧有关。请检查我更新的问题。

【解决方案2】：

图片大小为 240 像素。剪辑路径的半径为 116。将其增加到略大于图像大小的一半会移除边缘。将 r=116 更改为 r=120.05 会删除边框。

【讨论】：

我发现了像120.05 这样的其他尺寸，使边框几乎不可见，但在不同的缩放点，边缘仍然可见。在您的情况下，120.05 似乎在所有缩放时都隐藏了边缘，这太棒了！我不是在寻找隐藏边界的方法，而是在解释为什么它们在 clipPath 之外流血，以及是否有“正确”的方法来避免这个问题。
这是一个很好的发现，如果没有更合适的解决方案，我可能会求助于这个解决方案。谢谢！

【解决方案3】：

这是一个已知的 Chrome 错误。

https://bugs.chromium.org/p/chromium/issues/detail?id=1171601

与此同时，一种解决方法是改用遮罩。

body {
  margin: 0;
  background: #fff;
  text-align: center;
}
#profile-pic {
  width: 33%;
}
#profile-pic text {
  font-size: 48px;
  font-family: monospace;
  font-weight: bold;
  fill: #000;
  -webkit-animation: raise 1s linear infinite alternate;
          animation: raise 1s linear infinite alternate;
}
@-webkit-keyframes raise {
  from { transform: translateY(-10px); }
  to { transform: translateY(10px); }
}
@keyframes raise {
  from { transform: translateY(-10px); }
  to { transform: translateY(10px); }
}

<svg id="profile-pic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
  <title>Brandon McConnell</title>
<defs>
  <mask id="imageClipPath"><circle cx="250" cy="250" r="116" fill="white" /></mask>
</defs>
    <text dy="70" textLength="500">Lorem Ipsum</text>
    <image
    href="https://s.gravatar.com/avatar/6e25e38e140dda7ac64f7865b3df77ab?s=500"
    mask="url(#imageClipPath)"
    width="240"
    height="240"
         x="130"
         y="130"
  />
</svg>

【讨论】：

这正是我所需要的。谢谢，保罗！ ??