SVG中复用<defs>定义的动态文本是否可行？如何实现？

首先直接给你答案：当然支持！ <defs>标签的核心作用就是定义可复用的SVG元素，文本（<text>）自然也在支持范围内，正好匹配你想在不同位置复用尺寸信息的需求。

具体实现步骤 #

下面给你一步步拆解，配合示例代码更清晰：

1. 在中定义可复用的文本元素
   先把你想复用的尺寸文本定义在<defs>里，给它分配一个唯一的id（这是后续引用的关键），同时可以预先设置好字体、大小、颜色等基础样式：

   <svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
     <defs>
       <!-- 定义可复用的尺寸文本 -->
       <text id="dimension-label" font-family="Arial" font-size="16" fill="#333">
         尺寸：200×150px
       </text>
     </defs>
     <!-- 这里放引用元素 -->
   </svg>
   

2. 用标签在任意位置引用
   通过<use>标签指向你在<defs>中定义的文本id，通过x和y属性控制文本的显示位置。如果需要调整个别引用的样式（比如颜色、大小），直接在<use>上覆盖对应属性即可：

   <svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
     <defs>
       <text id="dimension-label" font-family="Arial" font-size="16" fill="#333">
         尺寸：200×150px
       </text>
     </defs>
     <!-- 第一个引用：左上角位置 -->
     <use href="#dimension-label" x="20" y="30" />
     <!-- 第二个引用：右下角位置，修改颜色为蓝色 -->
     <use href="#dimension-label" x="250" y="270" fill="#0066cc" />
     <!-- 第三个引用：中间位置，放大字体 -->
     <use href="#dimension-label" x="150" y="150" font-size="20" />
   </svg>
   

额外注意事项 #

• 兼容性：如果需要兼容旧版浏览器（比如IE），需要使用xlink:href代替href，同时要在SVG根标签添加xmlns:xlink="http://www.w3.org/1999/xlink"属性。
• 样式优先级：<use>上设置的样式会覆盖<defs>中定义的基础样式，比如上面示例中第二个引用的蓝色，第三个引用的大号字体。
• 动态修改：如果需要后续通过JavaScript修改所有复用的文本内容，只需要修改<defs>中原始<text>的内容，所有<use>引用都会自动同步更新，这也是复用的一大优势。

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