Javascript 基于xml属性为图像创建div覆盖

我想创建一个div覆盖，设置为5%不透明度，这将在图像中的每一行文本周围创建一个对角线边界框。我有绘制边界框所需的四个点中的每个点的坐标，这些点被编码为XML元素中的属性，XML元素包含单独行的文本作为其数据。在我看来，因为我有四个角的x，y坐标，我应该能够创建覆盖层——但我不知道标记div的正确语法是什么。有人建议我使用CSS的转换函数（这是我最初提出这个问题时的正确调用）但这听起来像是我基本上要写八个独立的css片段，每行一个——这可能会变得混乱，因为可能有118张这样的图片，我要为它们编写自定义的css片段

我是否错误地认为这可以通过编程实现，如果不是，有人能告诉我一些实现方法吗

是的，可以使用简单的html标记：

<div class="image_box" data-cords="20,50,210,50,50,250,240,250">I am the text inside the div, I can be in several lines. It is important for text stay vertical and it is important the text to follow boundary box.</div>

---

可以使用jQuery

css（）

method等脚本设置css。

$.fn.skewText = function () {
    return this.each(function (i) {
        var thisText = $(this);
        var coords = thisText.data('cords').split(',');
        /* Calculate degree */
        var deg = Math.tan((coords[5] - coords[1]) / (coords[4] - coords[0])) * 57.2957795;
        /* Skew pixels for calculations */
        var skewVal = coords[4] - coords[0];
        /* Calculate position */
        var cssWidth = (coords[2] - coords[0] - skewVal) + 'px';
        var cssHeight = (coords[5] - coords[1]) + 'px';
        var cssTop = coords[1] + 'px';
        var cssLeft = (coords[0] * 1 + skewVal) + 'px'; /* Add a half of skew */
        /* Wrapp and apply styles */
        thisText.wrapInner('<div class="skew_padding" />').wrapInner('<div class="skew_text" />');
        var skewText = thisText.find('.skew_text');
        skewText.css({
            'transform': 'skew(' + deg + 'deg)',
                'top': cssTop,
                'left': cssLeft,
                'width': cssWidth,
                'height': cssHeight,
                'background': 'none rgba(0,0,0,.5)'
        });
        /* Now skew back each letter inside */
        var skewPadding = skewText.find('.skew_padding');
        var letters = skewPadding.text().split(' ');
        var newText = '<span>' + letters.join('</span> <span>') + '</span>';
        skewPadding.html(newText);
        skewPadding.find('span').css({
            'display': 'inline-block',
                'transform': 'skew(' + (-deg) + 'deg)'
        });
    });
};
$('[data-cords]').skewText();

.image_box {
    position: relative;
    width: 300px;
    height: 300px;
    background: yellow;
}
.skew_text {
    position: absolute;
}
.skew_padding {
    padding: 10px;
}