Question

嗨大家我通过引用https://github.com/pguso/jquery-plugin-circliful来研究jQuery Circle Progress Bar（Circlefuljs插件），在这一切都很好，在这里我有一个文本参数我可以给一些字符串文本将显示在圆圈内，我的问题是如果我的文字大小很大，文字重叠在圆圈之外，所以我试图给出一个新的一行，但它不起作用，请看我的这里的片段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",
  });
});

我尝试在text参数中使用\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样式给你想要的任何东西

        <h1>Website Title</h1>
<body>
	<ul id='navbar'>
		<li id='nav_li'><a id='nav_a' href='index.html'>Home</a></li>
		<li id='nav_li'><a id='nav_a' href='gallery.html'>Gallery</a></li>
		<li id='nav_li'><a id='nav_a' href='reviews.html'>Our reviews</a></li>
	</ul>
	<div id='nav_fill'> </div>

	<div id='content'>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>	
	<footer>
	  <p>Content &copy; Business Name - Website design &copy;</p>
	</footer>
</body>

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 Circle进度条文本新行

3 个答案: