xml - 如何使用 xml 坐标点生成 html 布局

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 轴（可以是任何类型的多边形，通常是矩形）。有多个 img 和 text 区域。

我想编写 xslt （或任何东西）以在 html 中获得与在 xml 中相同的布局，但我无法弄清楚。

Edit1：我正在使用 png-img 生成 xml。我基本上想将img转换为html。我有生成 OCR 和其他东西的 cmpny 工具。我需要生成一个布局，指定 text/imgs 的去向。

如 img 所示，标记的区域在 XML 文件中表示。我想在 HTML 页面中创建相同的布局。

标签： xmlxslt

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>