svg 中使用text

UniAPP中使用SVG，Text元素冲突及解决方案

ffc23467-5e6b-4474-8d74-edcb1d602641.png

<template>
    <view>
        <svg id="svgBox" class="svg-box" viewBox="0 0 300 200">
            <!-- 一条线 -->
            <path d="M10 60 H290" stroke="#4c8dff" stroke-width="8" stroke-linecap="round" fill="none" />
            <!-- 一个节点圆点 -->
            <circle cx="60" cy="60" r="6" fill="#fff" stroke="#4c8dff" stroke-width="2" />
         </svg>
    </view>
</template>

<script>
    export default {
           data() {
            return {
                // 示例数据，按需替换
                tags: [{
                        x: 60,
                        y: 80,
                        z: 0,
                        text: '节点1'
                    },
                    {
                        x: 150,
                        y: 60,
                        z: 0,
                        text: '节点2'
                    },
                    {
                        x: 240,
                        y: 120,
                        z: 0,
                        text: '节点3'
                    },
                ],
             },

        mounted() {
            // H5 里 mounted 就有 DOM；小程序端建议用 this.$nextTick 或 onReady
            this.$nextTick(() => {
                const box = document.getElementById('svgBox');
                if (box) box.appendChild(this.createSvgText(this.tags));
            });
        },


        methods: {
            /**
             * 创建 SVG 文本碎片
             * @param {Array<{x:number, y:number, z:number, text:string}>} tags
             */
            createSvgText(tags) {
                const fragment = document.createDocumentFragment();
                tags.forEach(tag => {
                    const textEl = document.createElementNS('http://www.w3.org/2000/svg', 'text');
                    textEl.textContent = tag.text;
                    textEl.setAttribute('x', String(tag.x));
                    textEl.setAttribute('y', String(tag.y));
                    textEl.setAttribute('font-size', '12');
                    textEl.setAttribute('fill', '#000');
                    textEl.setAttribute('text-anchor', 'middle'); // 居中可选
                    fragment.appendChild(textEl);
                });
                return fragment;
            },

        }
</script>

<style scoped lang="scss">
    .svg-box {
        width: 100%;
        height: 200px;
        background: #f5f7fa;
    }
</style>