主页 / 问题 / 1350413
Accepted
Alexandr_TT
Asked:2022-04-16 18:40:17 +0800 CST2022-04-16 18:40:17 +0800 CST

显示裁剪边缘的 SVG

  • 772

使用本机 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 中看到了这一点。截屏：

https://isstatic.askoverflow.dev/ZCfll.png

系统特点：

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)

SVG 的松散翻译显示了 @Brandon McConnell的剪裁边缘问题。

html

1 个回答

  1. Best Answer

    这是一个已知的 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>

    来自贡献者 @Paul LeBeau的答案的松散翻译 。

    • 1

相关问题