вращение — поместите абсолютные элементы в PDF (или изображение)

Я работаю над «генератором трубопровода», и когда он будет готов, его подробности должны быть отправлены в PDF-файл. Каждый компонент добавляется в конце другого, а также некоторые меры добавляются в «рисование». Основные элементы имеют абсолютную позицию, но некоторые ссылки (метки) являются относительными.
Я не могу напечатать это в моем PDF.

Я также попробовал некоторую библиотеку JS для генерации изображения (так что тогда я смогу использовать), но в ней также есть много ошибок.
Я обнаружил, что почти библиотеки HTMLtoPDF на PHP не поддерживают абсолютную позицию.

<div class="wrap">
<div class="surface active infinite"  style="width: 398.6px; height: 159.4px;">
<div class="pipesline" id="line_1" style="top: 0px; left: 0px;">
<div class="measure measureX" data-measure="1293 mm" style="top: 59.4px; left: 0px; width: 258.6px;"></div>
<div class="measure measureY" data-measure="291 mm" style="top: 0px; left: 298.6px; height: 19.4px;"></div>
<div class="component straight" style=" top:0px;left:0px;width:43.2px;height:19.4px;background-image: url    ('https://image.flaticon.com/icons/svg/162/162416.svg');">
<div class="legend">BFx5<br>(M1)</div>
<div class="switch opo">0</div>
</div>
<div class="component straight" style=" top:0px;left:43.2px;width:86.2px;height:19.4px;background-image: url    ('https://image.flaticon.com/icons/svg/162/162416.svg');">
<div class="legend">BFx10<br>(M2)</div>
<div class="switch">1</div>
</div>
<div class="component straight" style=" top:0px;left:129.4px;width:129.2px;height:19.4px;background-image:     url('https://image.flaticon.com/icons/svg/162/162416.svg');">
<div class="legend">BFx15<br>(M3)</div>
<div class="switch">1</div>
</div>
</div>
</div>
</div>

(В этих стилях он заменил локальные изображения для некоторых я нашел в Интернете)

<style type="text/css">
.wrap {
width: max-content;
height: max-content

}
.surface {
position: relative;
margin: 100px;
overflow: visible;
}
.pipesline {
position: absolute;
width: 0;
height: 0
}
.pipesline .measure {
position: absolute;
display: inline;
}
.pipesline .measure::before {
font-size: 12px;
text-align: center;
display: inline-block;
width: 100%;
height: 20px
}
.pipesline .measure::before {
font-size: 11px;
display: block;
content: attr(data-measure);
white-space: nowrap
}
.pipesline .measure.measureX {
height: 16px;
background: url('http://1x1px.me/FF4D00-0.8.png') repeat-x 0 4px, url('http://1x1px.me/FF4D00-0.8.png') repeat-y top             left, url('http://1x1px.me/FF4D00-0.8.png') repeat-y top right;
text-align: center;
padding-top: 6px
}
.pipesline .measure.measureX::before {
width: 100%
}
.pipesline .measure.measureY {
width: 16px;
background: url('http://1x1px.me/FF4D00-0.8.png') repeat-x top, url('http://1x1px.me/FF4D00-0.8.png') repeat-y 3px,              url('http://1x1px.me/FF4D00-0.8.png') repeat-x bottom
}
.pipesline .measure.measureY::before {
height: 100%;
transform: translateY(50%) rotate(-90deg);
transform-origin: top right
}
.pipesline .component {
position: absolute;
background-size: contain;
background-repeat: repeat-x;
border: 0;
top: 0;
left: 0;
padding: 0
}
.pipesline .component .legend {
width: 100%;
text-align: center;
position: absolute;
top: 113%;
left: 0;
font-size: 9px;
display: inline
}
.pipesline .component .switch {
text-align: center;
width: 100%;
position: absolute;
left: 0;
bottom: 190%;
font-size: 9px;
height: 30px;
background: url('https://www.svgrepo.com/show/240066/turn-off-switch.svg') no-repeat;
background-size: 20px 20px;
background-position: bottom center
}
.pipesline .component .switch.opo {
transform: rotate(-180deg);
transform-origin: middle center;
}
</style>

Любое предложение?