如何使用HTML和CSS在SVG图像的指定部分旁添加文本？

你可以用SVG的<text>元素直接在图形旁添加文本，通过x/y属性定位位置，搭配样式属性调整外观。以下是适配你需求的修改代码：

<svg id="svgelem" width="300" height="300" xmlns="http://www.w3.org/2000/svg">
    <!-- 原五边形图形 -->
    <polygon points="100,10 40,180 190,60 10,60 160,180" fill="blue"/>
    <!-- 添加文本标注 -->
    <text x="100" y="8" font-size="14" fill="black">顶点1</text>
    <text x="30" y="185" font-size="14" fill="black">顶点2</text>
    <text x="195" y="60" font-size="14" fill="black">顶点3</text>
    <text x="5" y="55" font-size="14" fill="black">顶点4</text>
    <text x="165" y="185" font-size="14" fill="black">顶点5</text>
</svg>

关键细节说明： #

• <text>的x/y控制文本的基线位置，你可以对照图形的顶点坐标微调这两个值，让文本精准贴合目标区域。
• 用font-size、fill、font-family等属性可以调整文本样式，匹配你的视觉需求。
• 如果需要让图形和文本联动（比如一起移动），可以把它们放进<g>分组里：

<svg id="svgelem" width="300" height="300" xmlns="http://www.w3.org/2000/svg">
    <g>
        <polygon points="100,10 40,180 190,60 10,60 160,180" fill="blue"/>
        <text x="100" y="8" font-size="14" fill="black">顶点1</text>
        <text x="30" y="185" font-size="14" fill="black">顶点2</text>
        <text x="195" y="60" font-size="14" fill="black">顶点3</text>
        <text x="5" y="55" font-size="14" fill="black">顶点4</text>
        <text x="165" y="185" font-size="14" fill="black">顶点5</text>
    </g>
</svg>

精准对齐技巧： #

如果需要文本和顶点完全居中对齐，可以添加text-anchor（水平对齐）和dominant-baseline（垂直对齐）属性：

<text x="100" y="10" font-size="14" fill="black" text-anchor="middle" dominant-baseline="middle">顶点1</text>

这样文本的中心会和(100,10)顶点重合，定位更精准。

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