纯SVG环境下如何向use引用的元素传递参数值？

纯SVG原生没有给<use>元素传递自定义参数的内置机制，但有两种不需要依赖JavaScript的纯SVG实现方案，可以满足你复用模板时自定义文本的需求，适配不同渲染环境：

方案1：CSS自定义属性实现（兼容性较好，代码最简洁） #

目前绝大多数SVG渲染引擎（包括浏览器、Inkscape、Cairo等非浏览器渲染工具）都已支持CSS自定义属性，可以通过变量传递文本内容，所有配置都集中在<use>标签上，不需要额外写重复的文本节点：

<svg width="160" viewBox="0 0 160 120" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <style>
            /* 定义文本类，从自定义变量读取内容 */
            .card-text::before {
                content: var(--text-content, "默认名称");
            }
        </style>
        <g id="test">
            <rect width="60" height="40"/>
            <text x="8" y="24" stroke="none" fill="black" class="card-text"/>
        </g>
    </defs>
    <!-- 引用时直接在style里传递自定义文本 -->
    <use href="#test" x="0" y="20" fill="aqua" stroke="blue" style="--text-content: '用户A'"/>
    <use href="#test" x="80" y="20" fill="orange" stroke="red" style="--text-content: '用户B'"/>
    <text y="100">This space for rent</text>
</svg>

• 优缺点：代码复用度最高，维护成本低，仅少数极老旧的SVG渲染引擎不支持该特性。

方案2：拆分模板组合实现（全兼容，无环境依赖） #

如果你的使用场景涉及不支持CSS变量的老旧渲染引擎，可以将图形模板和文本样式拆分，通过分组组合的方式实现复用，兼容性覆盖所有支持SVG 1.1标准的环境：

<svg width="160" viewBox="0 0 160 120" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <!-- 仅定义卡片图形模板 -->
        <g id="card-shape">
            <rect width="60" height="40"/>
        </g>
        <!-- 统一定义卡片文本样式，修改时仅需改一处 -->
        <style>
            .card-text {
                x: 8;
                y: 24;
                stroke: none;
                fill: black;
            }
        </style>
    </defs>
    <!-- 第一组卡片 -->
    <g transform="translate(0,20)">
        <use href="#card-shape" fill="aqua" stroke="blue"/>
        <text class="card-text">用户A</text>
    </g>
    <!-- 第二组卡片 -->
    <g transform="translate(80,20)">
        <use href="#card-shape" fill="orange" stroke="red"/>
        <text class="card-text">用户B</text>
    </g>
    <text y="100">This space for rent</text>
</svg>

• 优缺点：无任何环境依赖，兼容性拉满，比你当前单独添加文本的方式维护成本更低，仅比方案1多了分组的代码量。

内容的提问来源于stack exchange，提问作者Manngo