svg使用

1、正常使用

<svg ref="svgRef">
    <!-- 绘制多边形 -->
    <polygon points="100,100 150,100 150,150 100,150" fill="red" stroke="black" stroke-width="1"></polygon>
    <!-- 绘制线条 -->
    <line x1="100" y1="100" x2="150" y2="150" stroke="black" stroke-width="1"></line>
    <!-- 编写文本 -->
    <text x="50" y="50" fill="black" font-size="18" text-anchor="middle">
        {{ item.text}}
    </text>
</svg>

2、动态使用

<template>
     <svg ref="svgRef">
         <!-- 编写文本 -->
         <text v-for="(item, index) in texts" :key="index" :x="item.style.left" :y="item.style.top" fill="black" font-size="18" text-anchor="middle">
            {{ item.text }}
         </text>
     </svg>
</template>

<script>
    export default {
        methods: {
            mark_border() {
                const svg = this.$refs.svgRef;
                // 绘制多边形
                const polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
                // 设置多边形的顶点坐标
                polygon.setAttribute("points", "100,100 150,100 150,150 100,150");
                // 设置多边形的内部颜色
                polygon.setAttribute("fill", "red");

                // 设置多边形的边框颜色和宽度
                polygon.setAttribute("stroke", "black");
                polygon.setAttribute("stroke-width", "1");

                // 将多边形添加到SVG元素中
                svg.appendChild(polygon);

                // 绘制线条
                const line= document.createElementNS("http://www.w3.org/2000/svg", "line");
                // 设置线条的起点坐标
                line.setAttribute("x1", "50");
                line.setAttribute("y1", "50");
                // 设置线条的终点坐标
                line.setAttribute("x2", "100");
                line.setAttribute("x2", "100");


                // 设置多边形的边框颜色和宽度
                line.setAttribute("stroke", "black");
                line.setAttribute("stroke-width", "1");

                // 将多边形添加到SVG元素中
                svg.appendChild(line);
            }
        }
    }
</script>