jquery circle進度欄文本新行

Question

嗨，夥計們我正在通過參考https://github.com/pguso/jquery-plugin-circliful jQuery圓形進度條（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", 
    }); 
}); 

我試圖通過在文本參數使用\n因此它可以突破到新的生產線，但它不能正常工作，所以球員請幫助我弄清楚這個解決方案，這將是非常巨大的全力爲我。在此先感謝

Answer 1

您可以使用文本樣式，這是任何你想要的文字

$(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 2

此插件將您的文本轉換爲SVG圖像文本。您可以使用</tspan>標記添加多行。並正確地把你的正文x，y與jqueryattr()參數。

你可以在這裏找到更多的信息：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"> 
 
\t <div id="test-circle"></div> 
 
</div>