使用文本渲染SVG符号

Question

以下文件正在进行中，显示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>

我真的希望以一种优雅的方式将文本居中放在父组中。

JSFiddle：https://jsfiddle.net/8kouys3w/6/

Answer 1

清理代码

主要问题：所有形状都叠加在一起

其他问题（已修复）：

1. transform =＆＃34; translate（1154.0,0.0）scale（0.25）＆＃34;＆gt;
   实际上没有理由将其转化为远。并且缩放也不应该是因为你在所有元素上进行缩放。
2. 您的svg没有viewBox。这意味着它不会扩展。
3. 文字：显示的文字位于0.0（原点），而不是任何靠近形状的地方。

其他（未修复）：

1. 为什么你要旋转一圈？

     

   circle transform =＆＃34; rotate（90 320 240）＆＃34;

2. 你的线性渐变的停止不透明度为0.988281这个不透明度非常接近1，这里有很多小数。

我将在这里采取疯狂的猜测，并说你的代码是生成的，而不是编码。因此，如果您对生成的代码有问题，您应该在编辑器中修复这些问题，或者至少学习像viewBox和文本元素这样的svg的基础知识。这将花费更少的时间，然后在这里发布和回答。

＆＃13;
＆＃13;
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 110" 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="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">CCC</text>
  </g>
  <g id="lamp3" transform="translate(100,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 x="250" y="260" 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(200,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>
</svg>
＆＃13;
＆＃13;
＆＃13;

Answer 2

这可行...不需要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>

回顾一下......原始SVG没有任何问题，所做的只是将x和y的值更改为250和260.

JSFiddle：https://jsfiddle.net/8kouys3w/12/