Html 努力在路径SVG对象中添加文本_Html_Css_Svg

Html 努力在路径SVG对象中添加文本

html css svg

Html 努力在路径SVG对象中添加文本,html,css,svg,Html,Css,Svg,我使用Illustrator将jpeg转换为SVG。在这六个圆圈中，我希望能够将一些文本居中，以便进行自定义。我已经尝试了下面的代码，但什么也没有出现。在这个阶段，我不确定我会错在哪里，因为我遵循了我之前在stackoverflow上看到的建议。谁能告诉我哪里出了问题 <?xml version="1.0" encoding="utf-8"?> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"

我使用Illustrator将jpeg转换为SVG。在这六个圆圈中，我希望能够将一些文本居中，以便进行自定义。我已经尝试了下面的代码，但什么也没有出现。在这个阶段，我不确定我会错在哪里，因为我遵循了我之前在stackoverflow上看到的建议。谁能告诉我哪里出了问题

<?xml version="1.0" encoding="utf-8"?>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#FFFFFF;}
</style>
<g>
    <g>
        <path class="st0" d="M-119-29c283.6,0,567.2,0,850.9,0c0,283.5,0,567.1,0,850.8c-283.6,0-567.2,0-850.9,0
            C-119,538.3-119,254.7-119-29z M219.6,132c0-47.5-38.4-86.5-85.2-86.6c-47.9,0-87,38.2-87.1,85.2c0,48.1,38.2,87,85.7,87.1
            C180.7,217.6,219.6,179.1,219.6,132z M454.1,217.6c47.4,0,86.5-38.4,86.5-85.2c0-47.9-38.2-87-85.2-87c-48.1,0-87,38.3-87,85.7
            C368.4,178.7,406.9,217.6,454.1,217.6z M61.6,417.8c0-47.4-38.5-86.4-85.3-86.4c-47.9,0-86.9,38.3-86.9,85.3
            c0,48.1,38.3,86.9,85.8,86.9C22.8,503.6,61.6,465.1,61.6,417.8z M611.5,331.4c-47,0-86.1,38.6-86.2,85.1
            c-0.1,48.2,38.2,87.1,85.6,87.2c47.7,0,86.6-38.4,86.7-85.6C697.6,370.1,659.2,331.4,611.5,331.4z M133.9,604.4
            c-47.5,0-86.5,38.4-86.5,85.2c0,47.9,38.2,87,85.2,87c48.1,0,87-38.3,87-85.7C219.6,643.3,181.1,604.4,133.9,604.4z M540.6,690.5
            c0-47-38.6-86.1-85.1-86.1c-48.2-0.1-87.1,38.2-87.1,85.6c0,47.7,38.4,86.6,85.6,86.6C501.9,776.6,540.6,738.1,540.6,690.5z
             M491.2,229.1c17,28.2,33.8,56.2,50.6,84.2c-2.3,1.8-4.5,3.5-7,5.4c12,7.2,23.8,14.2,36.3,21.6c-1.1-14.7-2.2-28.2-3.2-42.2
            c-2.8,1.3-5.1,2.5-7.3,3.6c-17-28-34-55.9-51.1-84.1C503.1,221.6,497.1,225.3,491.2,229.1z M13.2,501.1
            c17,28.3,33.9,56.3,50.6,84.2c-2.4,1.9-4.5,3.5-6.9,5.4c12.1,7.2,23.8,14.2,36.2,21.6c-1.1-14.6-2.2-28.2-3.2-42.2
            c-2.9,1.4-5.2,2.5-7.4,3.5c-17-28-33.9-55.8-51.1-84.1C25.3,493.5,19.4,497.2,13.2,501.1z M81.2,210.8
            c-17.7,27.9-35.2,55.4-52.7,82.9c-2-1.1-4.1-2.3-6.5-3.6c-1.1,14.2-2.1,27.7-3.2,42.3c12.3-7.6,23.7-14.6,35.4-21.8
            c-2.4-1.9-4.4-3.5-6.7-5.3c17.3-28,34.5-55.9,51.8-84C93,217.7,87.3,214.4,81.2,210.8z M520.5,585.3c17.4-28.2,34.5-56,51.8-84
            c-6.3-3.6-12.1-7-18.1-10.5c-17.7,27.8-35.1,55.3-52.7,82.9c-2-1.1-4.1-2.3-6.6-3.6c-1.1,14.1-2.1,27.7-3.2,42.3
            c12.4-7.7,23.8-14.7,35.4-21.8C524.9,588.8,522.8,587.1,520.5,585.3z M237.3,144.1c27.5,0,54.6,0,81.9,0c0,3.1,0,5.8,0,9
            c13.7-6,26.9-11.8,41.2-18.1c-14.4-6.3-27.6-12.1-41-18c-0.2,3.3-0.3,6.1-0.4,9.3c-27.4,0-54.5,0-81.6,0
            C237.3,132.3,237.3,137.7,237.3,144.1z M351.6,676.9c-27.5,0-54.4,0-81.5,0c-0.1-2.9-0.3-5.5-0.4-8.8
            c-13.4,5.9-26.5,11.7-40.6,17.9c14.2,6.2,27.3,11.9,40.6,17.8c0.1-3.2,0.3-5.8,0.4-8.9c27.2,0,54.3,0,81.5,0
            C351.6,688.8,351.6,683.2,351.6,676.9z"/>        
            <text x="612" y="802" font-size="14" fill="black">test</text>           
        <path d="M219.6,132c0,47.2-38.9,85.7-86.6,85.7c-47.4,0-85.7-38.9-85.7-87.1c0-47,39.1-85.2,87.1-85.2
            C181.2,45.4,219.6,84.5,219.6,132z"  fill ="#206AAE"/>
            <text x="0" y="0" font-size="14" fill="black">test</text> 
        <path d="M454.1,217.6c-47.2,0-85.7-38.9-85.7-86.5c0-47.4,38.9-85.8,87-85.7c47,0,85.3,39.1,85.2,87
            C540.6,179.2,501.5,217.6,454.1,217.6z"/>
                        <text x="0" y="0" font-size="14" fill="black">test</text> 
        <path d="M61.6,417.8c0,47.3-38.8,85.8-86.4,85.8c-47.5,0-85.8-38.9-85.8-86.9c0-47,39.1-85.3,86.9-85.3
            C23.1,331.4,61.6,370.4,61.6,417.8z"/>
        <path d="M611.5,331.4c47.6,0,86.1,38.7,86.1,86.7c0,47.2-38.9,85.6-86.7,85.6c-47.4,0-85.6-39-85.6-87.2
            C525.4,370,564.5,331.4,611.5,331.4z"/>
        <path d="M133.9,604.4c47.2,0,85.7,38.9,85.7,86.5c0,47.4-38.9,85.7-87,85.7c-47,0-85.2-39.1-85.2-87
            C47.4,642.8,86.5,604.4,133.9,604.4z"/>
        <path d="M540.6,690.5c0,47.6-38.7,86.1-86.6,86.1c-47.2,0-85.6-38.9-85.6-86.6c0-47.4,39-85.6,87.1-85.6
            C502,604.4,540.6,643.5,540.6,690.5z"/>
        <path d="M491.2,229.1c6-3.8,11.9-7.5,18.2-11.5c17.1,28.2,34.1,56.1,51.1,84.1c2.3-1.1,4.6-2.2,7.3-3.6c1.1,14,2.1,27.5,3.2,42.2
            c-12.5-7.4-24.2-14.5-36.3-21.6c2.5-1.9,4.6-3.6,7-5.4C525,285.3,508.2,257.3,491.2,229.1z"/>
        <path d="M13.2,501.1c6.2-3.9,12.1-7.6,18.3-11.5c17.2,28.3,34.1,56.1,51.1,84.1c2.2-1.1,4.5-2.2,7.4-3.5c1.1,14,2.1,27.6,3.2,42.2
            c-12.4-7.4-24.1-14.4-36.2-21.6c2.4-1.9,4.5-3.6,6.9-5.4C47,557.4,30.2,529.4,13.2,501.1z"/>
        <path d="M81.2,210.8c6.1,3.6,11.8,6.9,18.1,10.5c-17.3,28.1-34.5,56-51.8,84c2.2,1.8,4.3,3.4,6.7,5.3
            c-11.7,7.2-23.1,14.3-35.4,21.8c1.1-14.6,2.1-28.2,3.2-42.3c2.5,1.4,4.5,2.5,6.5,3.6C46,266.2,63.5,238.7,81.2,210.8z"/>
        <path d="M520.5,585.3c2.3,1.8,4.4,3.4,6.7,5.3c-11.6,7.2-23,14.2-35.4,21.8c1.1-14.7,2.1-28.2,3.2-42.3c2.5,1.4,4.5,2.5,6.6,3.6
            c17.5-27.6,35-55.1,52.7-82.9c6,3.5,11.8,6.8,18.1,10.5C555,529.3,537.9,557.1,520.5,585.3z"/>
        <path d="M237.3,144.1c0-6.3,0-11.8,0-17.8c27.1,0,54.2,0,81.6,0c0.1-3.3,0.3-6,0.4-9.3c13.5,5.9,26.6,11.7,41,18
            c-14.3,6.3-27.5,12.1-41.2,18.1c0-3.3,0-5.9,0-9C291.9,144.1,264.8,144.1,237.3,144.1z"/>
        <path d="M351.6,676.9c0,6.3,0,11.9,0,18c-27.3,0-54.3,0-81.5,0c-0.1,3.1-0.3,5.7-0.4,8.9c-13.4-5.9-26.4-11.6-40.6-17.8
            c14.1-6.2,27.2-11.9,40.6-17.9c0.1,3.2,0.3,5.8,0.4,8.8C297.2,676.9,324.1,676.9,351.6,676.9z"/>
    </g>
</g>

</svg>


.st0{fill:#FFFFFF；}
试验
试验
试验

将

节点放置在其他几何图形之后，以防止在图形后面隐藏文本

文本节点具有神秘的坐标

和

，位于svg视口之外

您的

viewBox

隐藏了svg的一部分，我将其向左移动并向右展开

首先，

在markup-outline中，我没有删除它，但它不是必需的，对于其他形状，可以使用

svg

的属性

stroke

实现这种效果

我已将您的示例更正为：


试验
试验
试验
试验
试验
试验

由于您的代码非常冗长，我想您不会介意我简化它。我正在使用javascript计算所有圆的位置：

我希望有帮助

const SVG\u NS=”http://www.w3.org/2000/svg";
常量SVG_XLINK=”http://www.w3.org/1999/xlink";
设R=180；//群的半径
设r=50；//每个圆的半径
设圆=[]；//圆圈数组表示日期
让行=[]；//线的数组
设n=0//柜台
//在六边形的顶点处创建圆
for（设a=0；a<2*Math.PI；a+=Math.PI/3）{
设o={}；
o、 cx=R*Math.cos（a）；
o、 cy=R*数学sin（a）；
o、 r=r；
o、 id=`c${n}`；
圆。推（o）；
绘制（o，“圆”，圈）；
n++
}
//为每个圆创建一条从一个圆到另一个圆的直线（路径）
//在CSS中，线条有一个stroke dasharray和一个stroke dashoffset，以便仅绘制中间部分
for（设i=1；i/*0测试您的文本太小。请尝试字体大小：50px
查看文本。@TomJ我的答案对您没有帮助吗？