帮助中心

SVG 头像框制作指南

基本规范

属性 要求
画布尺寸 width="200" height="265"
viewBox 0 -5 200 265（顶部留 5px 给装饰元素）
头像区域 圆心 cx=100 cy=153，预留半径约 76px
头像 inset top: 31%，bottom: 12%，left: 13%，right: 13%

系统会自动将头像裁切为圆形，叠加在 SVG 框的头像区域内。

坐标系说明

viewBox: 0 -5 200 265
┌─────────────────────┐  y = -5（顶部装饰区）
│    装饰元素区域       │
│  ┌───────────────┐  │  y = 65（圆环顶部）
│  │               │  │
│  │   头像显示区   │  │  圆心 (100, 153)
│  │               │  │
│  └───────────────┘  │  y = 241（圆环底部）
│                     │
└─────────────────────┘  y = 260（底部）
  • X 轴：0 → 200，水平居中为 100
  • Y 轴：-5 → 260，头像圆心固定在 y=153
  • 头像安全区：圆心 (100, 153)，内径半径约 76px，即头像不超出此圆

推荐结构

<svg width="200" height="265" viewBox="0 -5 200 265"
     fill="none" xmlns="http://www.w3.org/2000/svg">

  <defs>
    <!-- 渐变、滤镜定义放这里 -->
  </defs>

  <!-- 1. 背景装饰（最底层） -->

  <!-- 2. 主圆环（围绕头像区域） -->
  <circle cx="100" cy="153" r="88" .../>

  <!-- 3. 顶部装饰元素（y < 65，位于圆环上方） -->

  <!-- 4. 动画元素（可选） -->

</svg>

主圆环参数

<!-- 外圆环（含发光） -->
<circle cx="100" cy="153" r="88" fill="none"
        stroke="url(#your-gradient)" stroke-width="6"/>

<!-- 内圆环（细线装饰） -->
<circle cx="100" cy="153" r="78" fill="none"
        stroke="url(#your-gradient)" stroke-width="2"/>
用途 cx cy r 说明
轨道/动画 100 153 94 最外轨道
主圆环外 100 153 88 主装饰圆
主圆环内 100 153 78 内层细线
头像边界 100 153 76 不要在此圆内放固定元素

顶部装饰元素

顶部装饰（如动物、人物、图标）放在圆环正上方，底部不超过 y=70：

<!-- 示例：顶部图标，底部 y ≈ 70 -->
<g filter="url(#glow)">
  <!-- 主体，底部控制在 y=70 附近 -->
  <ellipse cx="100" cy="55" rx="10" ry="14" fill="#d946ef"/>
  <!-- 头部 -->
  <circle cx="100" cy="38" r="10" fill="#fae8ff"/>
</g>

注意：顶部装饰的最低点建议不超过 y=70，否则会遮挡头像。

动画

支持以下两种动画标签：

<animate> — 属性变化动画

<!-- 透明度脉冲 -->
<animate attributeName="opacity"
         values="0;0.3;0" dur="2.5s" repeatCount="indefinite"/>

<!-- 半径呼吸 -->
<animate attributeName="r"
         values="94;100;94" dur="2.5s" repeatCount="indefinite"/>

<animateTransform> — 旋转轨道

<!-- 顺时针旋转（轨道圆点） -->
<animateTransform attributeName="transform" type="rotate"
                  from="0 100 153" to="360 100 153"
                  dur="20s" repeatCount="indefinite"/>

<!-- 逆时针旋转 -->
<animateTransform attributeName="transform" type="rotate"
                  from="0 100 153" to="-360 100 153"
                  dur="28s" repeatCount="indefinite"/>

旋转中心必须是头像圆心 (100, 153)。

滤镜（Filters）

常用滤镜定义：

<defs>
  <!-- 外发光 -->
  <filter id="outer-glow" x="-25%" y="-25%" width="150%" height="150%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="b"/>
    <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
  </filter>

  <!-- 小元素发光（如轨道圆点） -->
  <filter id="pip-glow" x="-100%" y="-100%" width="300%" height="300%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="b"/>
    <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
  </filter>

  <!-- 投影 -->
  <filter id="shadow">
    <feDropShadow dx="0" dy="3" stdDeviation="6"
                  flood-color="#d946ef" flood-opacity="0.5"/>
  </filter>
</defs>

使用：filter="url(#outer-glow)"

渐变

<defs>
  <!-- 线性渐变（按坐标） -->
  <linearGradient id="ring-main" x1="0" y1="0" x2="200" y2="260"
                  gradientUnits="userSpaceOnUse">
    <stop offset="0%"   stop-color="#f5d0fe"/>
    <stop offset="50%"  stop-color="#e879f9"/>
    <stop offset="100%" stop-color="#4a044e"/>
  </linearGradient>
</defs>

<!-- 使用 -->
<circle cx="100" cy="153" r="88" stroke="url(#ring-main)" .../>

轨道圆点（旋转装饰）

在圆环外侧均匀分布 8 个点，随圆环旋转：

<g>
  <animateTransform attributeName="transform" type="rotate"
                    from="0 100 153" to="360 100 153"
                    dur="20s" repeatCount="indefinite"/>
  <!-- 8 个方向的椭圆点，r=94 轨道上 -->
  <ellipse cx="100" cy="59"  rx="2.5" ry="5" fill="#e879f9" filter="url(#pip-glow)"/>
  <ellipse cx="167" cy="80"  rx="2.5" ry="5" fill="#d946ef"
           transform="rotate(45 167 80)" filter="url(#pip-glow)"/>
  <!-- ... 其余 6 个点按 45° 递增 -->
</g>

8 个点的坐标（基于 cx=100, cy=153, r=94）：

角度 cx cy
0°（顶） 100 59
45° 167 80
90°（右） 194 153
135° 167 226
180°（底） 100 247
225° 33 226
270°（左） 6 153
315° 33 80

自定义头像位置（avatarInset）

默认头像位置（适配本规范的 SVG）：

{
  "type": "svg",
  "svg": "<svg ...>...</svg>",
  "avatarInset": {
    "top": "31%",
    "bottom": "12%",
    "left": "13%",
    "right": "13%"
  }
}

如果你的圆环圆心或大小不同，可以通过 avatarInset 微调头像位置。计算方法：

top    = (圆心y - 内径r) / 画布高度 × 100%
bottom = (画布高度 - 圆心y - 内径r) / 画布高度 × 100%
left   = (圆心x - 内径r) / 画布宽度 × 100%
right  = (画布宽度 - 圆心x - 内径r) / 画布宽度 × 100%

商店头像框配置

在管理后台「商店管理」创建头像框商品时：

  • 商品类型：选择「头像框」
  • 图标：直接粘贴完整 SVG 代码

系统会自动将 SVG 渲染为头像框，无需额外配置。

完整最简示例

<svg width="200" height="265" viewBox="0 -5 200 265"
     fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="g" x1="0" y1="0" x2="200" y2="260"
                    gradientUnits="userSpaceOnUse">
      <stop offset="0%"   stop-color="#60a5fa"/>
      <stop offset="100%" stop-color="#7c3aed"/>
    </linearGradient>
  </defs>

  <!-- 主圆环 -->
  <circle cx="100" cy="153" r="88"
          fill="none" stroke="url(#g)" stroke-width="6"/>

  <!-- 脉冲动画圆 -->
  <circle cx="100" cy="153" r="94"
          fill="none" stroke="#60a5fa" stroke-width="1" opacity="0">
    <animate attributeName="opacity" values="0;0.4;0" dur="2s" repeatCount="indefinite"/>
    <animate attributeName="r" values="94;100;94" dur="2s" repeatCount="indefinite"/>
  </circle>
</svg>
助手