0

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,

expected one

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

125% scaling

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

200% scaling

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

Smankusors
  • 377
  • 2
  • 8
  • 21
  • 1
    Sounds like something you should report to [Chrome's bugtracker](https://bugs.chromium.org/p/chromium/issues/list) – Robert Longson Apr 04 '22 at 08:59
  • oh yeah. I just found this issue https://bugs.chromium.org/p/chromium/issues/detail?id=800784 welp it's been years it's still open – Smankusors Apr 05 '22 at 02:57

1 Answers1

1

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>
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181