Jquery 圆形进度条文字换行

Question

大家好，我正在研究 jQuery 圆圈进度条（Circlefuljs 插件），参考 https://github.com/pguso/jquery-plugin-circliful, in this every thing works fine, In this I'm having a text parameter where I can give some string text that will show inside the circle, My issue is if my text size is big the text is overlaping outside of the circle, So I'm trying to give an new line, but it is not working, please see my snippet here 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 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>

Answer 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",
  });
});

Answer 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 : '') +

Jquery 圆形进度条文字换行

Jquery Circle Progress Bar text new line

jquery

geometry

text

newline

progress-bar