Javascript SVG文本元素圆形边框中的文本拟合

当我动态创建svg时，文本圈在数量上运行良好。但我使用小写字母（例如：-FFFFFF IISASDAS）文本圈创建一半，但我需要完整的圆圈，形状应根据我们放置的内容做出反应
请检查下面的图片 1. 2.

以下代码使用

<svg width="845" height="350" viewBox="0 0 845 350"       clip-rule="nonzero"     >
    <g 
        data-ng-attr-fill="{{addText.color}}" 
        data-ng-attr-width="{{addText.w}}"
        data-ng-attr-height="{{addText.h}}"
        data-ng-attr-transform="{{rotate(addText)}}"
        strok  <defs>

        <path stroke-width = "3"
              fill="userSpaceOnUse"
              data-ng-attr-id="temp-{{addText.id}}"
              data-ng-attr-d="{{makeBox1(addText, true)}}" />
        </defs>
        <text ng-if="addText.text"  glyph-orientation-vertical="90" lengthAdjust="spacingAndGlyphs" "
              data-ng-attr-text-anchor="{{addText.text.anchor}}"
              data-ng-attr-font-family="{{addText.text.font}}"
              data-ng-attr-font-style="{{addText.text.italic ? 'italic' : 'none'}}"
              data-ng-attr-font-weight="{{addText.text.bold ? 'bold' : 'normal'}}"
              data-ng-attr-font-size="{{addText.text.size}}"
              data-ng-attr-x="{{arcMid(addText)}}"
              letter-spacing="2";
              style="text-align:justify"
              kerning="8">

            <textPath data-ng-xlink-href="#temp-{{addText.id}}"  method = "stretch"
                      writing-mode="lr-tb"  clip-rule="nonzero"  xlink:href="">
                {{addText.text.text}}</textPath>
        </text>
        <path fill="none" stroke="#EEE" data-ng-attr-d="{{makeBox1(addText,true)}}"  />
    </g>
</svg>

---

它适用于数字，因为它们总是有一个固定的宽度——或者几乎总是。这是因为您通常希望数字在列中对齐，例如在发票中

计算圆半径的复杂公式基于字体大小。该公式显然已经过调整，因此它与您使用的字体中数字的宽度配合得很好。但它不适用于一般的非数字文本。或者可能用不同字体的数字

在任何情况下都很难做到完美，因为不同的浏览器可能会以不同的方式实现它们的

元素

最好是测量文本长度，然后除以（2*PI）计算半径

通过对元素调用

getComputedTextLength（）

，可以获取

元素中文本的长度

var msg=“FFFFFF IISASDAS”；
//获取SVG
var mysvg=document.getElementById（“mysvg”）；
//获取文本长度
var tmp=document.createElements（“http://www.w3.org/2000/svg“，”文本“）；
tmp.textContent=msg；
mysvg.appendChild（tmp）；
var len=tmp.getComputedTextLength（）；
mysvg.removeChild（tmp）；
//警报（“len=”+len）；
//做一个圆圈，让味精坐在上面
变量x1=424.5，
y1=293，
x2=425.5，
y2=293；
var r=len/（2*Math.PI）；
var circ=document.createElements（“http://www.w3.org/2000/svg“，”路径“）；
circ.setAttribute（“id”、“circ”）；
circ.setAttribute（“d”、“M”+x1+“”+y1+“”+
“A+r+”+r+“01+x2+”+y2）；
mysvg.appendChild（circ）；
//创建textPath元素
var tp1=document.createElements（“http://www.w3.org/2000/svg“，”文本“）；
mysvg.appendChild（tp1）；
var tp2=document.createElements（“http://www.w3.org/2000/svg“，”文本路径“）；
tp2.刚毛（“http://www.w3.org/1999/xlink“，”href“，”circ“；
tp2.textContent=msg；
tp1.附肢儿童（tp2）
svg文本{
字体系列：无衬线；
字体大小：20px；
}
#保监会{
填充：无；
笔画：黑色；
}

问题是什么…？我希望svg文本圈随内容增长…..我希望动态创建svg文本元素，使内容随大小增长。。。。。请检查图像：-此图像工作正常，但此图像不工作视频url:-^]此公式存在相同问题。。完整圆圈创建数字和字母创建半圆…..BigBadaboom:-你能给我你的skypid或联系电话或电子邮件idIt适合我吗。请看我刚刚添加的代码示例。如何在此基础上创建半圆
$scope.makeBox1 = function makeBox1(item, temp) {

    if (item.c == 1) {


        var ma = $('#txtsearch').val();
        var legth = ma.length;

        console.log(legth + "m");
        if (item.r == 0) {
            item.r = item.h / 2;
        }
        var x1 = item.x + item.w / 2,
            y1 = item.y + (item.h),
            x2 = x1 + 1,
            r = item.r;
        if (temp) {
            x1 = 270 + item.w / 2;
            y1 = 30 + (item.h);
            x2 = x1 + 1;
        }

        item.r = ((((((legth) * item.text.size * 5) / (legth / 0.9))) * legth * .02) + (legth * 0.09));
        if (item.r > 137) {

            item.r = 137;
        }
        x1 = 424.5;
        y1 = 293;
        r = item.r;
        x2 = 425.5;
        var y2 = 293




        return "M " + x1 + " " + y1 + " " +
               "A " + r + " " + r + " 0 1 1 " + x2 + " " + y2;
    }  
    }