Jquery 圆形进度条文本换行答案

【问题标题】：Jquery Circle Progress Bar text new lineJquery 圆形进度条文本换行
【发布时间】：2016-11-11 09:45:15
【问题描述】：

大家好，我正在通过引用 https://github.com/pguso/jquery-plugin-circliful 开发 jQuery Circle 进度条（Circlefuljs 插件），在这一切工作正常，在这个我有一个文本参数，我可以在其中提供一些字符串文本，这些文本将显示在圆圈内，我的问题是，如果我的文本大小很大，文本会在圆圈外重叠，所以我尝试换行，但它不起作用，请在此处查看我的 sn-p https://jsfiddle.net/heh12u5v/

<script src="https://cdnjs.cloudflare.com/ajax/libs/circliful/1.0.2/js/jquery.circliful.min.js"></script>
<div style="width:400px">
    <div id="test-circle"></div>
</div>
var value = 75
$(document).ready(function() {
  $("#test-circle").circliful({
    animationStep: 5,
    foregroundBorderWidth: 15,
    backgroundBorderWidth: 15,
    percent: value,
    iconPosition: 'middle',
    text: "This circle \n for demo",
  });
});

我尝试在文本参数中使用\n，这样它就可以换行，但它不起作用，所以请大家帮我整理一下这个解决方案，这对我来说非常棒。提前致谢

【问题讨论】：

标签： jquery text progress-bar newline geometry

【解决方案1】：

此插件将您的文本转换为 SVG 图像文本。您可以使用</tspan> 标签添加多行。并使用 jquery attr() 参数正确放置您的主要文本 x,y。

您可以在这里找到更多信息：https://www.safaribooksonline.com/library/view/svg-text-layout/9781491933817/ch04.html

请在下面尝试。工作正常。

var value = 75
$(document).ready(function() {
  $("#test-circle").circliful({
    animationStep: 5,
    foregroundBorderWidth: 15,
    backgroundBorderWidth: 15,
    percent: value,
    iconPosition: 'middle',
    text: 'This circle <tspan  y="113" x="101">for demo</tspan>'
  });
  $(".circliful text:eq(0)").attr("y",94)
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/circliful/1.0.2/css/jquery.circliful.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/circliful/1.0.2/js/jquery.circliful.min.js"></script>
<div style="width:400px">
	<div id="test-circle"></div>
</div>

【讨论】：

【解决方案2】：

您可以使用 textStyle，它在文档中，您可以使用文本的 css 样式提供任何您想要的内容

$(document).ready(function() {
  $("#test-circle").circliful({
    animationStep: 5,
    foregroundBorderWidth: 15,
    backgroundBorderWidth: 15,
    percent: value,
    iconPosition: 'middle',
    textStyle: 'font-size:8px;',
    text: "This circle for demo",
  });
});

【讨论】：

【解决方案3】：

如果有人在圆圈后面出现问题文本，则可以在主js文件中更改这一行-

(typeof elements !== 'undefined' ? elements : '') +
'<circle cx="100" cy="100" r="57" class="border" fill="' + settings.fillColor + '" stroke="' + settings.backgroundColor + '" stroke-width="' + backgroundBorderWidth + '" stroke-dasharray="360" transform="rotate(-90,100,100)" />' +

在线编号 - 416 到

'<circle cx="100" cy="100" r="57" class="border" fill="' + settings.fillColor + '" stroke="' + settings.backgroundColor + '" stroke-width="' + backgroundBorderWidth + '" stroke-dasharray="360" transform="rotate(-90,100,100)" />' +
(typeof elements !== 'undefined' ? elements : '') +

【讨论】：