SVG中如何缩放并居中<use>引用的子图形元素？

核心实现：通过<use>的transform属性控制 #

针对你的需求，直接给雄鹿的<use>标签添加transform属性，就能同时完成缩放和居中（或偏移），以下是几种实用方法：

1. 通用居中缩放法（适配任意缩放倍数N） #

这种方法不管你设置多少缩放比例，都能让雄鹿精准居中于心形内部，无需手动计算偏移量：

<div>
    <svg width="64" height="64" fill="currentColor">
        <use href="#bi-heart"></use>
        <!-- 将0.6替换为你需要的缩放倍数N -->
        <use href="#bi-stag" transform="translate(8, 8) scale(0.6) translate(-8, -8)"></use>
    </svg>
</div>

• 逻辑说明：
  • translate(-8, -8)：将雄鹿自身的中心（对应其viewBox="0 0 16 16"的坐标(8,8)）移到SVG坐标系原点
  • scale(N)：以原点为中心，将雄鹿缩放N倍
  • translate(8, 8)：将缩放后的雄鹿移回心形的中心位置

2. 直接缩放+手动偏移 #

如果已经明确缩放比例，也可以直接缩放后手动调整偏移位置：

<div>
    <svg width="64" height="64" fill="currentColor">
        <use href="#bi-heart"></use>
        <!-- 示例：缩小到50%，并平移到中心 -->
        <use href="#bi-stag" transform="scale(0.5) translate(4, 4)"></use>
    </svg>
</div>

• 计算方式：当缩放倍数为N时，偏移量为(8*(1-N), 8*(1-N))，比如N=0.5时，偏移量就是(4,4)

3. 自定义偏移位置 #

如果不需要严格居中，只需调整最后一步的translate参数即可。比如让雄鹿向上偏移2个单位：

<use href="#bi-stag" transform="translate(8, 6) scale(0.6) translate(-8, -8)"></use>

（将原本的translate(8,8)改为translate(8,6)，y轴坐标减少2，实现向上偏移）

4. CSS控制（可选） #

也可以通过CSS类来管理变换，方便统一调整：

<style>
    .stag-custom {
        transform: translate(8px, 8px) scale(0.6) translate(-8px, -8px);
    }
</style>
<div>
    <svg width="64" height="64" fill="currentColor">
        <use href="#bi-heart"></use>
        <use href="#bi-stag" class="stag-custom"></use>
    </svg>
</div>

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