Как создать макет html, используя xml координаты

Question

У меня есть xml, который выглядит следующим образом:

...

<ImageRegion id="r0">
    <Coords points="0,0 0,523 1365,523 1365,892 2048,892 2048,377 92,377 2048,377 2048,0"/>
</ImageRegion>

<TextRegion id="r2" type="caption">
    <Coords points="1021,81 1021,182 40,182 40,81"/>
    <TextEquiv conf="0.63228">
        <Unicode>Lorem Ipsum</Unicode>
    </TextEquiv>
</TextRegion>
...

точки координат дают оси x, y для всех точек области (это может быть любой тип многоугольника, обычно прямоугольный * 1017) *). Существует несколько областей img и text.

Я хочу написать xslt (или что-нибудь еще), чтобы получить такой же макет в html, как в xml, но я не могу понять.

Edit1: я генерирую xml, используя png-img. Я в основном хочу конвертировать IMG в html. У меня есть инструменты cmpny, которые генерируют OCR и другие вещи. Мне нужно создать макет, который определяет, где текст / imgs будет go.

Как видно из img, отмеченные области представлены в файл XML. Я хочу создать такой же макет на странице HTML.

Answer 1

Итак, я написал python скрипт для чтения xml и генерации html.

. html выглядит так:

<svg>
<g id="r1" class="img">
    <polygon points="31,1757 30,3131 2017,3131 2018,1757"
                style="fill:rgb(121,0,121);stroke-width:3; stroke:rgb(0,0,0);stroke-opacity:0.5;opacity:0.5">
    </polygon>
</g>

<g id="r2" class="text">
    <text x="530.5" y="131.5" fill="black" text-anchor="middle" alignment-baseline style="font-size: 20px;">Lorem Ipsum
    </text>
    <polygon points="1021,81 1021,182 40,182 40,81"
                style="fill:rgb(50,50,121);stroke-width:3; stroke:rgb(0,0,0); stroke-opacity:0.5;opacity:0.5">
    </polygon>
</g>
</svg>