Chrome SVG夹式路径在监视器上行为不足

发布于 2025-01-18 14:53:29 字数 860 浏览 0 评论 0原文

下面我有一个小的 HTML 片段，

<p style="clip-path: polygon(0 0, 100px 0, 100px 10px, 0 10px)">Lorem ipsum dolor sit amet</p>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
  <text y=16 clip-path="polygon(0 0, 100px 0, 100px 10px, 0 10px)">Lorem ipsum dolor sit amet</text>
</svg>

我预计 svg 会像 p 一样被剪裁。像下面这样，

但是将其移动到我的另一台显示器（以 125% 缩放比例运行）时，它会发生变化，

然后我尝试使用 Macbook，运行速度为 200%缩放后，剪辑就消失了

原文

So I have a small HTML snippet below,

<p style="clip-path: polygon(0 0, 100px 0, 100px 10px, 0 10px)">Lorem ipsum dolor sit amet</p>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
  <text y=16 clip-path="polygon(0 0, 100px 0, 100px 10px, 0 10px)">Lorem ipsum dolor sit amet</text>
</svg>

I expected the svg to be clipped as p does. Something like this below,

But moving this to my other monitor, which runs at 125% scaling, it changes,

Then I tried with the Macbook, which runs at 200% scaling, and the clip is gone ????.

I found the alternative solution, which is by using Window.devicePixelRatio to correctly scale the clip-path (because the SVG is generated on the fly).

The problem is that this only happens on Chrome (and other Chromium-based). While on Firefox it's consistent across all monitors. So which browser is the correct behavior? Is this bug for Chrome? I can't find any existing questions about this on StackOverflow. ????

Thanks,

edit: oh yeah I just found it's been on bug tracker since 2018 https://bugs.chromium.org/p/chromium/issues/detail?id=800784

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

骄兵必败 2025-01-25 14:53:29

如果您将 clip-path 应用到 SVG，而不是，它的行为将符合您的预期。

<p style="clip-path: polygon(0 0, 100px 0, 100px 10px, 0 10px)">Lorem ipsum dolor sit amet</p>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" clip-path="polygon(0 0, 100px 0, 100px 10px, 0 10px)">
  <text y="16">Lorem ipsum dolor sit amet</text>
</svg>

If you apply the clip-path to the SVG, rather than the <text>, it behaves as your expect.

<p style="clip-path: polygon(0 0, 100px 0, 100px 10px, 0 10px)">Lorem ipsum dolor sit amet</p>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" clip-path="polygon(0 0, 100px 0, 100px 10px, 0 10px)">
  <text y="16">Lorem ipsum dolor sit amet</text>
</svg>

回复收藏 0 原文

~没有更多了~