<script setup>
const props=defineProps({
    itemData:{
        type:Object,
        default:{}
    }
})


</script>

<template>
    <div 
        class="rect-shape-box"
        :style="{
            top: itemData.percentageTop*100 + '%',
            left: itemData.percentageLeft*100 + '%',
        }"
    >
        <svg 
            overflow="visible" 
            :width="itemData.width"
            :height="itemData.height"
        >
            <g 
            :transform="`scale(${itemData.width / itemData.viewBox[0]}, ${itemData.height / itemData.viewBox[1]}) translate(0,0) matrix(1,0,0,1,0,0)`"
            >
                <path 
                    class="shape-path"
                    vector-effect="non-scaling-stroke" 
                    stroke-linecap="butt" 
                    stroke-miterlimit="8"
                    stroke-linejoin="" 
                    :d="itemData.path" 
                    :fill="itemData.fill"
                    :stroke="itemData.outline.color"
                    :stroke-width="itemData.outline.width" 
                    :stroke-dasharray="itemData.outline.style === 'dashed' ? '10 6' : '0 0'" 
                ></path>
            </g>
        </svg>
    </div>
</template>

<style lang="scss" scoped>
.rect-shape-box{
    position: absolute;
    pointer-events: none;
    transform-origin: 0 0;
    svg{
        overflow:visible;
        transform-origin: 0 0;
    }
}
</style>