Jquery Circle 进度条文本换行

Question

大家好，我正在研究 jQuery Circle 进度条(Circlefuljs 插件)，引用 https://github.com/pguso/jquery-plugin-circliful ，在这一切都很好，在这我有一个文本参数，我可以在其中给出一些将显示在圆圈内的字符串文本，我的问题是如果我的文本大小很大，则文本会重叠在圆圈外，所以我试图给出一个新行，但它不起作用，请在此处查看我的代码片段 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，这样它就可以换行，但是它不起作用，所以请大家帮我解决这个解决方案，这将是非常好的对我来说太棒了。提前致谢

Answer 1

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

您可以在这里找到更多信息: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>