SVG 显示裁剪边

Question

我可以使用原生 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)

Answer 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>

Answer 2

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

Answer 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>

SVG 显示裁剪边

SVG shows clipped edge

html

css

svg

系统规格