SVG shows clipped edge-CodePudding

What can I do either using the native SVG syntax or in CSS to fix this clipped edge from appearing in my 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>

I am seeing this in the latest version of Chrome. Screenshot:

System Specs

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)

CodePudding user response：

This is a known Chrome bug.

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

In the meantime, one work around is to use a mask instead.

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 {
  background-color: red;
}

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

CodePudding user response：

The image has a size of 240px. The radius of the clip path is 116. Increasing it to slightly more than half of the image size removes the edge. Changing the r=116 to r=120.05 removes the border.

CodePudding user response：

I do see the artifact you mention. I found that removing this:

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

gets rid of that.

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>