SVG顯示剪裁邊緣

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

uj5u.com熱心網友回復：

這是一個已知的 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>

uj5u.com熱心網友回復：

影像的大小為 240 像素。剪輯路徑的半徑為 116。將其增加到略大于影像大小的一半會移除邊緣。將 更改r=116為r=120.05洗掉邊框。

uj5u.com熱心網友回復：

我確實看到了你提到的神器。我發現洗掉這個：

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

標籤：html css svg

上一篇：為什么在style屬性中定義的這個行內SVG過濾器不起作用？

下一篇：反轉svg折線