在SVG中将定位元素旁边放在另一个元素中

Question

这就是我想要实现的目标：

数字应该在中间水平居中，百分比符号应该显示在它旁边。

我不想硬编码任何值，特别是因为我有类似的用例，我想要居中的是用户定义的文本而不只是一个或两个数字的数字。我可以使用JavaScript读取.percentage容器的指标，但是用户可以选择他们自己的webfont，如果可能的话，我更愿意在SVG中完全执行此操作，而不必处理检测webfont何时完成加载。

这是我到目前为止所得到的：

.percentage__value {
  font-size: 80px;
}

.percentage__symbol {
  font-size: 20px;
}

<svg width="260" height="260">
  <g >
    <path
        fill="skyblue"
        transform="translate(130,130)"
        d="M0,130A130,130 0 1,1 0,-130A130,130 0 1,1 0,130M0,105A105,105 0 1,0 0,-105A105,105 0 1,0 0,105Z">
    </path>
    <path stroke="purple" d="M130 0 v 260 Z" stroke-width="2px"></path>
    <text class="percentage" x="130" y="130" text-anchor="middle">
      <tspan class="percentage__value" alignment-baseline="middle">93</tspan>
      <tspan class="percentage__symbol" alignment-baseline="middle">%</tspan>
    </text>
  </g>
</svg>

如果我使用HTML和CSS来做这件事我会做类似的事情：

.percentage {
  position: relative;
}

.percentage__symbol {
  position: absolute;
  ...
}

我能解决这个问题的一种方法是在数字的两边添加一个.percentage__符号并隐藏第一个符号，但这会打破文本选择。

我正在使用d3.js生成SVG，以防有用。

Answer 1

许多浏览器都不支持属性alignment-baseline。但你可以做什么：定义一个水平路径并用tspan元素包围textPath元素，为第一个startOffset="50%"定义tspan，例如第二个是70％。

请参阅http://jsfiddle.net/2e7opjxe/1/

还有另一个没有textPath的解决方案，只需定义x,y元素的tspan坐标。

请参阅http://jsfiddle.net/2e7opjxe/3/