如何使用SVG参数？能否实现SVG文本参数化及defs参数化？

问题背景 #

SVG支持通过参数配置图形属性，但现有示例多局限于颜色这类属性，且<defs>中定义的复用图形似乎无法接收参数，只能重复使用硬编码内容。现提出两个具体问题：

1. 是否可以参数化SVG文件，实现文本内容的动态变更？例如将指定SVG保存为x.svg，当访问x.svg?id=1时，文本显示为“1.”。目标SVG代码如下：

<svg xmlns="http://www.w3.org/2000/svg">
    <g>
        <text x="0" y="5" class="q">param(id).</text>
        <ellipse cx="42" cy="0" rx="12" ry="10" stroke="#000" fill="none"/>
        <text x="37" y="5" class="bubble">A</text>
    </g>
</svg>

2. 若上述功能可行，能否在<defs>标签中实现参数化文本的显示？

问题1：参数化SVG实现文本动态变更 #

可以实现，核心是用SVG内置的<script>标签读取URL参数，再动态修改文本内容。修改后的x.svg代码如下：

<svg xmlns="http://www.w3.org/2000/svg">
    <script type="text/javascript"><![CDATA[
        // 读取URL指定参数
        function getUrlParam(name) {
            const params = new URLSearchParams(window.location.search);
            return params.get(name);
        }
        
        // 获取id参数并更新文本内容
        const id = getUrlParam('id') || 'default';
        const textElement = document.querySelector('.q');
        if (textElement) {
            textElement.textContent = `${id}.`;
        }
    ]]></script>
    <g>
        <text x="0" y="5" class="q">default.</text>
        <ellipse cx="42" cy="0" rx="12" ry="10" stroke="#000" fill="none"/>
        <text x="37" y="5" class="bubble">A</text>
    </g>
</svg>

• 实现逻辑：通过JavaScript解析URL中的id参数，定位目标文本元素后替换内容；设置default作为参数缺失时的 fallback 值，避免显示异常。
• 注意：部分离线SVG查看器可能禁用JavaScript，此时无法生效，但在浏览器环境中完全可用。

问题2：在defs中实现参数化文本 #

同样可以实现，需要结合<use>标签和脚本克隆修改模板内容，示例代码如下：

<svg xmlns="http://www.w3.org/2000/svg">
    <script type="text/javascript"><![CDATA[
        function getUrlParam(name) {
            const params = new URLSearchParams(window.location.search);
            return params.get(name);
        }
        
        window.addEventListener('load', () => {
            const id = getUrlParam('id') || 'default';
            // 克隆defs中的可复用图形组
            const templateGroup = document.querySelector('#param-group').cloneNode(true);
            // 修改克隆后的文本内容
            const textElement = templateGroup.querySelector('.q');
            textElement.textContent = `${id}.`;
            // 替换页面中的<use>元素为修改后的克隆组
            const useElement = document.querySelector('#use-param');
            useElement.parentNode.replaceChild(templateGroup, useElement);
        });
    ]]></script>
    <defs>
        <g id="param-group">
            <text x="0" y="5" class="q">default.</text>
            <ellipse cx="42" cy="0" rx="12" ry="10" stroke="#000" fill="none"/>
            <text x="37" y="5" class="bubble">A</text>
        </g>
    </defs>
    <use id="use-param" href="#param-group" x="0" y="0"/>
</svg>

• 实现逻辑：在<defs>中定义通用图形组模板，页面加载后克隆该模板，根据URL参数修改克隆文本，最后替换原<use>元素。这种方式既保留了defs的复用性，又实现了参数化动态内容。
• 补充：部分规范中提到的<param>标签方案浏览器支持度有限，上述JavaScript方案兼容性更强。

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