Css 用文本呈现SVG符号

下面的文件是一个正在进行的工作，显示了3个灯，我试图在每个灯中显示水平和垂直居中的文本。我不确定发生了什么，但只有lamp3的文本出现了，而且它不在正确的位置。其他灯根本不显示文字

    <?xml version="1.0"?>
    <svg xmlns="http://www.w3.org/2000/svg" id="root">
      <defs>
        <linearGradient y2="0" id="lamp2rim" x1="0" x2="1" y1="0">
          <stop offset="0" stop-color="#bfbfbf"/>
          <stop offset="1" stop-color="#404040"/>
        </linearGradient>
        <linearGradient spreadMethod="pad" y2="1" id="lamp2cap" x1="0" x2="1" y1="0">
          <stop offset="0" stop-opacity="0.992188" stop-color="#00ff00"/>
          <stop offset="1" stop-opacity="0.988281" stop-color="#018201"/>
        </linearGradient>
        <linearGradient spreadMethod="pad" y2="1" id="lamp2spec" x1="0" x2="1" y1="0">
          <stop offset="0" stop-opacity="0.996094" stop-color="#ffffff"/>
          <stop offset="0.703125" stop-opacity="0.984375" stop-color="#06d306"/>
        </linearGradient>
        <linearGradient y2="0" id="lamp3rim" x1="0" x2="1" y1="0">
          <stop offset="0" stop-color="#bfbfbf"/>
          <stop offset="1" stop-color="#404040"/>
        </linearGradient>
        <linearGradient spreadMethod="pad" y2="1" id="lamp3cap" x1="0" x2="1" y1="0">
          <stop offset="0" stop-opacity="0.992188" stop-color="#00ff00"/>
          <stop offset="1" stop-opacity="0.988281" stop-color="#018201"/>
        </linearGradient>
        <linearGradient spreadMethod="pad" y2="1" id="lamp3spec" x1="0" x2="1" y1="0">
          <stop offset="0" stop-opacity="0.996094" stop-color="#ffffff"/>
          <stop offset="0.703125" stop-opacity="0.984375" stop-color="#06d306"/>
        </linearGradient>
        <linearGradient y2="0" id="lamp1rim" x1="0" x2="1" y1="0">
          <stop offset="0" stop-color="#bfbfbf"/>
          <stop offset="1" stop-color="#404040"/>
        </linearGradient>
        <linearGradient spreadMethod="pad" y2="1" id="lamp1cap" x1="0" x2="1" y1="0">
          <stop offset="0" stop-opacity="0.992188" stop-color="#00ff00"/>
          <stop offset="1" stop-opacity="0.988281" stop-color="#018201"/>
        </linearGradient>
        <linearGradient spreadMethod="pad" y2="1" id="lamp1spec" x1="0" x2="1" y1="0">
          <stop offset="0" stop-opacity="0.996094" stop-color="#ffffff"/>
          <stop offset="0.703125" stop-opacity="0.984375" stop-color="#06d306"/>
        </linearGradient>
      </defs>
      <g id="lamp2" transform="translate(15.0,0.0) scale(0.25)">
        <title>Lamp 2</title>
        <circle stroke-linecap="round" transform="rotate(90 320 240)"       fill="#212121" r="167" cx="320" id="lamp2svg_3" cy="240" stroke-width="17.5"/>
        <circle stroke-linecap="round" fill-opacity="0.64" fill="url(#lamp2rim)" r="160" cx="319.252837" id="lamp2svg_7" cy="239.999045" stroke-width="17.5"/>
        <circle stroke-linecap="round" fill="url(#lamp2cap)" r="150" cx="320.000535" id="lamp2svg_8" cy="240.001698" stroke-width="17.5"/>
        <text text-anchor="middle" x="0" y="0" font-size="55" font-family="Verdana" fill="blue">CCC</text>
        <ellipse stroke-linecap="round" transform="rotate(-47.7626 249.18 168.124)" fill="url(#lamp2spec)" rx="75.675959" cx="249.179609" ry="44.402987"  cy="168.124194" stroke-width="17.5"/>
      </g>
      <g id="lamp3" transform="translate(100.0,82.0) scale(0.25)">
        <title>Lamp 3</title>
        <circle stroke-linecap="round" transform="rotate(90 320 240)" fill="#212121" r="167" cx="320" id="lamp3svg_3" cy="240" stroke-width="17.5"/>
        <circle stroke-linecap="round" fill-opacity="0.64" fill="url(#lamp3rim)" r="160" cx="319.252837" id="lamp3svg_7" cy="239.999045" stroke-width="17.5"/>
        <circle stroke-linecap="round" fill="url(#lamp3cap)" r="150" cx="320.000535" id="lamp3svg_8" cy="240.001698" stroke-width="17.5"/>
        <text text-anchor="middle" x="0" y="0" font-size="55" font-family="Verdana" fill="blue">EEE</text>
        <ellipse stroke-linecap="round" transform="rotate(-47.7626 249.18 168.124)" fill="url(#lamp3spec)" rx="75.675959" cx="249.179609" ry="44.402987" cy="168.124194" stroke-width="17.5"/>
      </g>
      <g id="lamp1" transform="translate(100.0,0.0) scale(0.25)">
        <title>Lamp 1</title>
        <circle stroke-linecap="round" transform="rotate(90 320 240)" fill="#212121" r="167" cx="320" id="lamp1svg_3" cy="240" stroke-width="17.5"/>
        <circle stroke-linecap="round" fill-opacity="0.64" fill="url(#lamp1rim)" r="160" cx="319.252837" id="lamp1svg_7" cy="239.999045" stroke-width="17.5"/>
        <circle stroke-linecap="round" fill="url(#lamp1cap)" r="150" cx="320.000535" id="lamp1svg_8" cy="240.001698" stroke-width="17.5"/>
        <text text-anchor="middle" x="0" y="0" font-size="55" font-family="Verdana" fill="blue">AAA</text>
        <ellipse stroke-linecap="round" transform="rotate(-47.7626 249.18 168.124)" fill="url(#lamp1spec)" rx="75.675959" cx="249.179609" ry="44.402987" cy="168.124194" stroke-width="17.5"/>
      </g>
    </svg>

灯2
CCC
灯3
EEE
灯1
AAA

我真的想要一个优雅的方式居中的文本在家长组

jsiddle:

清理代码 主要问题：所有形状都堆叠在一起

其他问题（已修复）：

transform=“translate（1154.0,0.0）scale（0.25）”>
真的没有理由这么远。而且缩放也不应该是随意的，因为您正在对所有元素进行缩放

您的svg没有viewBox。这意味着它不会扩展

文本：显示的文本位于0.0（原点），而不是形状附近的任何位置

其他（非固定）：

你为什么要旋转一个圆？ 圆变换=“旋转（90 320 240）”

线性渐变的“停止不透明度”为0.988281，这对于非常接近1的不透明度来说是很多小数

我将在这里做一个疯狂的演讲，说你的代码是生成的，而不是编码的。因此，如果您在生成代码时遇到问题，您应该在编辑器中解决这些问题，或者至少学习svg的基础知识，如viewBox和文本元素。这将需要较少的时间，然后张贴和回答在这里

灯2
CCC
灯3
EEE
灯1
AAA

此功能有效…不需要viewBox

    <svg xmlns="http://www.w3.org/2000/svg" id="root">
      <defs>
        <linearGradient y2="0" id="lamp2rim" x1="0" x2="1" y1="0">
          <stop offset="0" stop-color="#bfbfbf" />
          <stop offset="1" stop-color="#404040" />
        </linearGradient>
        <linearGradient spreadMethod="pad" y2="1" id="lamp2cap" x1="0" x2="1" y1="0">
          <stop offset="0" stop-opacity="0.992188" stop-color="#00ff00" />
          <stop offset="1" stop-opacity="0.988281" stop-color="#018201" />
        </linearGradient>
        <linearGradient spreadMethod="pad" y2="1" id="lamp2spec" x1="0" x2="1" y1="0">
          <stop offset="0" stop-opacity="0.996094" stop-color="#ffffff" />
          <stop offset="0.703125" stop-opacity="0.984375" stop-color="#06d306" />
        </linearGradient>
        <linearGradient y2="0" id="lamp3rim" x1="0" x2="1" y1="0">
          <stop offset="0" stop-color="#bfbfbf" />
          <stop offset="1" stop-color="#404040" />
        </linearGradient>
        <linearGradient spreadMethod="pad" y2="1" id="lamp3cap" x1="0" x2="1" y1="0">
          <stop offset="0" stop-opacity="0.992188" stop-color="#00ff00" />
          <stop offset="1" stop-opacity="0.988281" stop-color="#018201" />
        </linearGradient>
        <linearGradient spreadMethod="pad" y2="1" id="lamp3spec" x1="0" x2="1" y1="0">
          <stop offset="0" stop-opacity="0.996094" stop-color="#ffffff" />
          <stop offset="0.703125" stop-opacity="0.984375" stop-color="#06d306" />
        </linearGradient>
        <linearGradient y2="0" id="lamp1rim" x1="0" x2="1" y1="0">
          <stop offset="0" stop-color="#bfbfbf" />
          <stop offset="1" stop-color="#404040" />
        </linearGradient>
        <linearGradient spreadMethod="pad" y2="1" id="lamp1cap" x1="0" x2="1" y1="0">
          <stop offset="0" stop-opacity="0.992188" stop-color="#00ff00" />
          <stop offset="1" stop-opacity="0.988281" stop-color="#018201" />
        </linearGradient>
        <linearGradient spreadMethod="pad" y2="1" id="lamp1spec" x1="0" x2="1" y1="0">
          <stop offset="0" stop-opacity="0.996094" stop-color="#ffffff" />
          <stop offset="0.703125" stop-opacity="0.984375" stop-        color="#06d306" />
        </linearGradient>
      </defs>
      <g id="lamp1" transform="translate(100,0) scale(0.25)">
        <title>Lamp 1</title>
        <circle stroke-linecap="round" transform="rotate(90 320 240)" fill="#212121" r="167" cx="320" id="lamp1svg_3" cy="240" stroke-width="17.5" />
        <circle stroke-linecap="round" fill-opacity="0.64" fill="url(#lamp1rim)" r="160" cx="319.252837" id="lamp1svg_7" cy="239.999045" stroke-width="17.5" />
        <circle stroke-linecap="round" fill="url(#lamp1cap)" r="150" cx="320.000535" id="lamp1svg_8" cy="240.001698" stroke-width="17.5" />
        <text x="250" y="260" font-size="55" font-family="Verdana" fill="blue">AAA</text>
        <ellipse stroke-linecap="round" transform="rotate(-47.7626 249.18 168.124)" fill="url(#lamp1spec)" rx="75.675959" cx="249.179609" ry="44.402987"  cy="168.124194" stroke-width="17.5" />
      </g>
      <g id="lamp2" transform="translate(200,0) scale(0.25)">
        <title>Lamp 2</title>
        <circle stroke-linecap="round" transform="rotate(90 320 240)" fill="#212121" r="167" cx="320" id="lamp2svg_3" cy="240" stroke-width="17.5" />
        <circle stroke-linecap="round" fill-opacity="0.64" fill="url(#lamp2rim)" r="160" cx="319.252837" id="lamp2svg_7" cy="239.999045" stroke-width="17.5" />
        <circle stroke-linecap="round" fill="url(#lamp2cap)" r="150" cx="320.000535" id="lamp2svg_8" cy="240.001698" stroke-width="17.5" />
        <ellipse stroke-linecap="round" transform="rotate(-47.7626 249.18 168.124)" fill="url(#lamp2spec)" rx="75.675959" cx="249.179609" ry="44.402987"  cy="168.124194" stroke-width="17.5" />
        <text x="250" y="260" font-size="55" font-family="Verdana" fill="blue">BBB</text>
      </g>
      <g id="lamp3" transform="translate(200,100) scale(0.25)">
        <title>Lamp 3</title>
        <circle stroke-linecap="round" transform="rotate(90 320 240)" fill="#212121" r="167" cx="320" id="lamp3svg_3" cy="240" stroke-width="17.5" />
        <circle stroke-linecap="round" fill-opacity="0.64" fill="url(#lamp3rim)" r="160" cx="319.252837" id="lamp3svg_7" cy="239.999045" stroke-width="17.5" />
        <circle stroke-linecap="round" fill="url(#lamp3cap)" r="150" cx="320.000535" id="lamp3svg_8" cy="240.001698" stroke-width="17.5" />
        <text x="250" y="260" font-size="55" font-family="Verdana" fill="blue">CCC</text>
        <ellipse stroke-linecap="round" transform="rotate(-47.7626 249.18 168.124)" fill="url(#lamp3spec)" rx="75.675959" cx="249.179609" ry="44.402987"  cy="168.124194" stroke-width="17.5" />
      </g>
    </svg>

灯1
AAA
灯2
BBB
灯3
CCC

总而言之，原来的SVG没有任何问题，所做的只是将x和y的值更改为250和260

---

JSFiddle:

我本想补充一点，元素可以共享相同的梯度，不需要对这些进行渲染，但我同意！请记住，您看到的是一个更大项目的一个小片段，在这个项目中，灯具有单独的渐变，因为它们将独立控制，颜色可能会有所不同。至于旋转一个圆，我相信这是因为渐变是旋转的，而不是旋转圆。缩放到函数不需要viewBox，缩放函数不需要viewBox。它需要扩展整个svg元素！我永远不会明白你怎么能说这个代码没有错。