peanut
e1097cbbee
问题: - SVG 文件使用 filter 和 style 属性导致小程序编译错误 - 错误信息：ReferenceError: $1 is not defined 修复: 1. 简化 SVG 文件，移除 filter 和 style 属性 - 移除 filter (feGaussianBlur, feMerge) - 移除 style 属性，改用直接属性 (stop-color 替代 style="stop-color:xxx") - 移除 filter="url(#glow)" 引用 2. 恢复 vite.config.js 的 publicDir 配置 - publicDir 指向 mini-program/static 目录 - SVG 文件编译到输出目录根位置 3. 更新图片引用路径 - splash/index.vue: /static/logo.svg - main/index.vue: /static/logo.svg 效果: - logo.svg 正确编译到 unpackage/dist/dev/mp-weixin/logo.svg - 不再出现 $1 is not defined 错误 - 小程序正常加载 logo 图片
50 lines
2.4 KiB
XML
50 lines
2.4 KiB
XML
<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#A855F7"/>
|
|
<stop offset="50%" stop-color="#9333EA"/>
|
|
<stop offset="100%" stop-color="#7C3AED"/>
|
|
</linearGradient>
|
|
<linearGradient id="pillarGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#C084FC"/>
|
|
<stop offset="100%" stop-color="#A855F7"/>
|
|
</linearGradient>
|
|
<radialGradient id="coreGlow" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="#E879F9"/>
|
|
<stop offset="50%" stop-color="#A855F7"/>
|
|
<stop offset="100%" stop-color="#A855F7" stop-opacity="0"/>
|
|
</radialGradient>
|
|
</defs>
|
|
|
|
<!-- 背景圆角正方形 -->
|
|
<rect x="40" y="40" width="944" height="944" rx="200" fill="url(#bgGradient)"/>
|
|
|
|
<!-- 背景光晕 -->
|
|
<circle cx="512" cy="512" r="300" fill="url(#coreGlow)" opacity="0.5"/>
|
|
|
|
<!-- 神殿柱廊：三根柱子 -->
|
|
<rect x="280" y="320" width="60" height="384" rx="30" fill="url(#pillarGradient)" opacity="0.9"/>
|
|
<rect x="482" y="280" width="60" height="464" rx="30" fill="url(#pillarGradient)" opacity="0.9"/>
|
|
<rect x="684" y="320" width="60" height="384" rx="30" fill="url(#pillarGradient)" opacity="0.9"/>
|
|
|
|
<!-- 柱顶横梁 -->
|
|
<path d="M240 300 L784 300 L784 340 L240 340 Z" fill="url(#pillarGradient)" opacity="0.8"/>
|
|
|
|
<!-- 中心情绪核心：发光的椭圆 -->
|
|
<ellipse cx="512" cy="540" rx="80" ry="100" fill="white" opacity="0.95"/>
|
|
<ellipse cx="512" cy="540" rx="50" ry="70" fill="url(#coreGlow)"/>
|
|
|
|
<!-- 顶部星芒：呼应星海概念 -->
|
|
<path d="M512 180 L524 220 L564 220 L532 244 L544 284 L512 260 L480 284 L492 244 L460 220 L500 220 Z" fill="#E879F9"/>
|
|
|
|
<!-- 底部装饰弧线 -->
|
|
<path d="M320 780 Q512 840 704 780" stroke="#C084FC" stroke-width="6" stroke-linecap="round" fill="none" opacity="0.6"/>
|
|
<path d="M360 820 Q512 860 664 820" stroke="#C084FC" stroke-width="4" stroke-linecap="round" fill="none" opacity="0.4"/>
|
|
|
|
<!-- 四角装饰：星光点缀 -->
|
|
<circle cx="160" cy="160" r="8" fill="#C084FC" opacity="0.8"/>
|
|
<circle cx="864" cy="160" r="8" fill="#C084FC" opacity="0.8"/>
|
|
<circle cx="160" cy="864" r="8" fill="#C084FC" opacity="0.8"/>
|
|
<circle cx="864" cy="864" r="8" fill="#C084FC" opacity="0.8"/>
|
|
</svg>
|