本文详解如何使用 SVG 的 元素配合 x、y 坐标与 transform 属性，在矩形边框的顶部、底部、左侧、右侧四个边缘中央精准放置并正确旋转文字，确保可读性与视觉对齐。
本文详解如何使用 svg 的 `
在 SVG 中为边框添加文字标签（如“TOP”“BOTTOM”“LEFT”“RIGHT”）并使其自然贴合各边中心，关键在于坐标定位 + 精确旋转变换。直接使用 x/y 只能实现平面上的定位，而上下左右四边的文字朝向各不相同：顶部和底部文字应水平居中、正向显示；左侧文字需顺时针旋转 90°（或等效为逆时针 -90°），使其沿竖直边从上到下阅读；右侧文字则需逆时针旋转 90°（或等效为顺时针 90°），保证文字方向一致且垂直居中。
✅ 正确的定位与旋转策略
顶部文字（TOP）：
使用x="50%"水平居中，y="21"（略高于边框顶部，留出视觉间距），无需旋转（默认水平）。若需镜像翻转（如倒置效果），可用transform="rotate(180 347 15)"，其中347 ≈ viewBox.width / 2 = 694 / 2，15是近似 y 基准点（顶部边线 y≈4.56，+10px 间距后取整）。底部文字（BOTTOM）：
x="50%"水平居中，y="98%"（接近 viewBox 高度底部，426 × 0.98 ≈ 417.5），同样保持水平，无需旋转。左侧文字（LEFT）：
x="22"（固定像素值，避开左边界留白），y="50%"垂直居中；通过transform="rotate(-90 26, 213)"实现绕点 (26, 213) 逆时针转 90° —— 该旋转中心点213 ≈ 426 / 2，确保文字垂直居中于左侧边；26是 x 方向微调锚点，使文字紧贴边框内侧。右侧文字（RIGHT）：
x="95%"（避免撑出视图），y="50%"；transform="rotate(90 667, 213)"绕点(667, 213)顺时针转 90°，其中667 ≈ 694 − 27（预留右侧边距），213同样保障垂直居中。
? 旋转中心点说明：SVG 的
rotate(a cx cy)中cx/cy是旋转参考点（非元素自身中心）。必须显式指定，否则默认以(0,0)旋转，导致文字飞出视野。中心点坐标应基于viewBox="0 0 694 426"计算：水平中点为347，垂直中点为213。
? 完整可运行示例
<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="100%" height="100%" viewBox="0 0 694 426">
<!-- 主边框背景 -->
<g>
<path d="M659.89 4.56006L34.89 4.66006V4.56006H5.48999V421.66H689.29V4.56006H659.89ZM34.89 399.56V26.7601H659.89V399.46L34.89 399.56Z" fill="#34428B"/>
</g>
<!-- 文字组：统一样式 + 精确定位 -->
<g id="text-group">
<text x="50%" y="21">TOP</text>
<text x="50%" y="98%">BOTTOM</text>
<text x="22" y="50%" transform="rotate(-90 26, 213)">LEFT</text>
<text x="95%" y="50%" transform="rotate(90 667, 213)">RIGHT</text>
</g>
</svg>
<style>
#text-group > text {
fill: white;
text-anchor: middle; /* 关键：让 x/y 对应文字中点 */
dominant-baseline: middle; /* 可选：增强 y="50%" 垂直居中鲁棒性 */
font-size: 20px;
font-family: sans-serif;
}
</style>⚠️ 注意事项与最佳实践
- ✅ 始终设置
text-anchor: middle：这是实现x="50%"或x="22"精确居中的前提，否则x默认对齐文字左端。 - ✅ 慎用百分比
y值：y="98%"在viewBox高度固定时可靠，但若 SVG 自适应缩放，建议改用绝对值（如y="417"）或结合dominant-baseline提升兼容性。 - ✅ 旋转前先定位，再绕中心点调整：先粗略设
x/y，再用transform微调旋转中心，避免反复试错。 - ❌ 避免
transform="rotate(90)"无中心点参数：这会以(0,0)旋转，文字极大概率消失。 - ? 进阶方案：对复杂路径边框，可使用
<textpath></textpath>沿<path></path>渲染文字，但本例中矩形边框用transform更简洁高效。
掌握这套基于 viewBox 尺寸计算旋转中心 + text-anchor 精确定位的方法，即可稳定、可维护地为任意 SVG 边框添加专业级标注文字。
