Question

当我创建动态svg文本圈在数量上工作正常。但我使用小写字母（例如： - ffffffiiiisasdasdas）文本圈创建一半但我需要完整的圆形，并且Shape应该根据我们放置的内容做出反应。。
请检查以下图片 1。http://tinypic.com/view.php?pic=15fll6b&s=8 2。http://tinypic.com/view.php?pic=fe1181&s=8

代码使用

<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>

的javascript

$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;
    }  
    }

Answer 1

它为数字工作，因为它们总是有固定的宽度 - 或者几乎总是如此。这是因为您通常希望数字在列中对齐 - 例如在发票中。

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

在每种情况下都很难让它完美地工作，因为不同的浏览器可能会以不同的方式实现它们的<textPath>元素。

您可以做的最好的方法是测量文本长度，然后通过除以（2 * PI）来计算半径。

您可以通过调用元素上的<text>来获取getComputedTextLength()元素中文本的长度。

＆＃13;

var msg="ffffffiiiisasdasdas";

// Get SVG
var  mysvg = document.getElementById("mysvg");

// Get text length
var tmp = document.createElementNS("http://www.w3.org/2000/svg", "text");
tmp.textContent = msg;
mysvg.appendChild(tmp);
var  len = tmp.getComputedTextLength();
mysvg.removeChild(tmp);
//alert("len = "+len);

// Make the circle path for the msg to sit on
var  x1 = 424.5,
     y1 = 293,
     x2 = 425.5,
     y2 = 293;
var  r = len / (2 * Math.PI);
var circ = document.createElementNS("http://www.w3.org/2000/svg", "path");
circ.setAttribute("id", "circ");
circ.setAttribute("d", "M " + x1 + " " + y1 + " " +
                       "A " + r + " " + r + " 0 1 1 " + x2 + " " + y2);
mysvg.appendChild(circ);

// Make the textPath element
var  tp1 = document.createElementNS("http://www.w3.org/2000/svg", "text");
mysvg.appendChild(tp1);
var  tp2= document.createElementNS("http://www.w3.org/2000/svg", "textPath");
tp2.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#circ");
tp2.textContent = msg;
tp1.appendChild(tp2);

＆＃13;

svg text {
    font-family: sans-serif;
    font-size: 20px;
}

#circ {
    fill: none;
    stroke: black;
}

＆＃13;

<svg id="mysvg" width="845" height="350" viewBox="0 0 845 350">
</svg>

＆＃13;

SVG文本元素文本适合圆边框

1 个答案: