【问题标题】：Rendering SVG symbols with text使用文本渲染 SVG 符号
【发布时间】：2016-01-25 21:43:03
【问题描述】：

以下文件是显示 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/

【问题讨论】：

标签： css svg

【解决方案1】：

清理代码

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

其他问题（已修复）：

transform="translate(1154.0,0.0) scale(0.25)">
真的没有理由把它转换那么远。并且缩放也不应该是必要的，因为您正在对所有元素进行缩放。
您的 svg 没有 viewBox。这意味着它不会扩展。
文本：显示的文本位于 0.0（原点），而不是靠近形状的任何位置。

其他（不固定）：

你为什么要旋转一个圆圈？

圆变换="旋转(90 320 240)"
您的线性渐变的停止不透明度为 0.988281 对于真正接近 1 的不透明度来说，这是很多小数。

我要在这里猜测一下，说您的代码是生成的而不是编码的。因此，如果您在生成代码时遇到问题，您应该在编辑器中解决这些问题，或者至少学习 svg 的基础知识，例如 viewBox 和文本元素。这将花费更少的时间然后在这里发布和回答。

<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>

【讨论】：

我会补充说元素可以共享相同的渐变，不需要样板化，但是我和你在一起！
请记住，您正在查看一个更大项目的小 sn-p，其中灯具有单独的渐变，因为它们将被独立控制并且颜色可能会有所不同。至于旋转一个圆圈，我相信是因为渐变不是旋转圆圈。
不需要 viewBox 来实现缩放功能
缩放功能不需要viewBox。它需要缩放整个 svg 元素！

【解决方案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/

【讨论】：

我永远不会明白你怎么能说这段代码没有问题。