Question

我第一次使用SVG进入圆环图。

我已经制作了图表，现在正试图将文本死区置于环中。

我已经设法使用一个简单的文本元素使用单一样式来实现这一点，但是，我想以不同的方式设置后缀的样式。为了做到这一点，我创造了2个跨度。

.donut-wrapper {
max-width: 200px;
}

<div class="donut-wrapper">
  <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut-chart">
      <circle class='donut-ring' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='#e0e0e0' stroke-width='4'></circle><circle class='donut-segment' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='#00c853' stroke-width='4' stroke-dasharray='75 25' stroke-dashoffset='25'></circle>
      <text x="50%" class="chart-label">
         <tspan y="50%" alignment-baseline="middle" class="number">99</tspan><tspan y="50%" alignment-baseline="middle" class="suffix">%</tspan>
     </text>
  </svg>
</div>

正如您将看到的，我已设法垂直对齐文本，但无法将文本水平居中。

另外，我希望'％'后缀的大小是'number'的一半，并与数字的顶部对齐。

我已经阅读了很多关于对齐多行文本的文章，但却无法找到我对此场景所需的内容。

Answer 1

我认为你只需要text-anchor =＆＃34; middle＆＃34;。请注意，Firefox不支持对齐基线，但它确实支持显性基线。

y属性和您拥有的多个tspan元素似乎存在跨浏览器渲染问题。我担心我不确定如何以跨浏览器的方式解决这个问题。

＆＃13;

.donut-wrapper {
max-width: 200px;
}

.suffix {
font-size: 0.6em;
}

＆＃13;

<div class="donut-wrapper">
  <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut-chart">
      <circle class='donut-ring' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='#e0e0e0' stroke-width='4'></circle><circle class='donut-segment' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='#00c853' stroke-width='4' stroke-dasharray='75 25' stroke-dashoffset='25'></circle>
      <text text-anchor="middle" dominant-baseline="middle" x="50%" y="50%" class="chart-label">
         <tspan class="number">99</tspan><tspan dy="-0.25em" class="suffix">%</tspan>
     </text>
  </svg>
</div>

＆＃13;

Answer 2

如果您不介意使用某些脚本，可以根据需要放置文本

var svgText  = document.getElementsByTagName("text")[0];
var number = document.getElementsByClassName("number")[0];
var suffix = document.getElementsByClassName("suffix")[0];


var bbox = svgText.getBBox();

svgText.setAttribute("x", bbox.x-bbox.width/2); 
svgText.setAttribute("y", bbox.y+bbox.height); 
suffix.setAttribute("y", bbox.y+bbox.height*.75); 

console.log(bbox);

.donut-wrapper {
max-width: 200px;
}

.number{
  font-size:1em;
}
.suffix{
  font-size:.5em;
}

<div class="donut-wrapper">
  <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut-chart">
      <circle class='donut-ring' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='#e0e0e0' stroke-width='4'></circle><circle class='donut-segment' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='#00c853' stroke-width='4' stroke-dasharray='75 25' stroke-dashoffset='25'></circle>
      <text x="50%" y="50%">
         <tspan class="number">99</tspan>
         <tspan class="suffix">%</tspan>
     </text>
  </svg>
</div>

（也许你必须重新调整IE，因为getBBox()在IE上没有返回相同的高度和宽度）

将SVG文本集中在一行上

2 个答案: