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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
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:
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>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>