'Python/PDFKit: How to display overlapping geometries created in CSS?

I am trying to convert a self-made HTML-report to PDF with pythons' pdfkit.from_file(). My problem is that some circles I have superimposed are not displayed correctly -as in HTML- in the PDF-file.

I also tried to give relative positions but it doesn't work too.

I know that the pdfkit has some problems with margin but I didn't use that here.

Thanks in advance! :)

Cirles in HTML (correctly displayed): HTML

Circles in PDF (not correctly): PDF

Does anyone know how I can make the circles look exactly the same in the PDF as they do in the HTML?

These are the CSS and HTML-Snippets I use:

.pie_outer {
  display: block;
  position: absolute;
  top: 0px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-image: conic-gradient( #474747 3deg, transparent 0);
  display: flex;
  justify-content: center;
  align-items: center;
}

.pie_inner_1 {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #b0b0b0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pie_inner_2 {
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #b0b0b0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pie_punkte {
  font-size: 34px;
}

<div style="height:200px">
  <div id="pie_cat1" style="width:125px;position:absolute;top:420px;">
    <div class="pie_inner_1" id="pie_inner_1_cat1" style="background-color: rgb(211, 255, 224);"></div>
    <div class="pie_outer" id="pie_outer_cat1" style="background-image: conic-gradient(rgb(21, 203, 76) 360deg, transparent 0deg);"></div>
    <div class="pie_inner_2" id="pie_inner_2_cat1" style="background-color: rgb(211, 255, 224);">
      <p align="center" class="pie_punkte" id="punkte_cat1" style="color: rgb(21, 203, 76);">100</p>
    </div>
    <div style="width:100px;position:absolute;top:100px;left:0px;">
      <p align="center">Category A</p>
    </div>
  </div>
  <div id="pie_cat2" style="width:125px;position:absolute;top:420px;left:125px;">
    <div class="pie_inner_1" id="pie_inner_1_cat2" style="background-color: rgb(255, 226, 222);"></div>
    <div class="pie_outer" id="pie_outer_cat2" style="background-image: conic-gradient(rgb(255, 85, 64) 36deg, transparent 0deg);"></div>
    <div class="pie_inner_2" id="pie_inner_2_cat2" style="background-color: rgb(255, 226, 222);">
      <p align="center" class="pie_punkte" id="punkte_cat2" style="color: rgb(255, 85, 64);">10</p>
    </div>
    <div style="width:100px;position:absolute;top:100px;left:0px;">
      <p align="center">Category B</p>
    </div>
  </div>
</div>

Solution 1:^[1]

There is nothing wrong with your code, it looks good, thus any aberations are a bug in the pdf writing engine, and should be raised with the maintainers.

However you should test your pdfkit code in the interactive demo first at https://pdfkit.org/demo/browser.html

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	K J

'Python/PDFKit: How to display overlapping geometries created in CSS?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]