SVG_text.动态创建&换行显示（竖）

最新推荐文章于 2024-09-02 08:17:16 发布
最新推荐文章于 2024-09-02 08:17:16 发布
阅读量628 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/h5skill/p/9543331.html
版权

1、1.1、SVGTextContentElement - Web APIs _ MDN.html（https://developer.mozilla.org/en-US/docs/Web/API/SVGTextContentElement）

　　CSS 'letter-spacing' and 'word-spacing' properties

　　1.2、二、svg文字之排版 - CSDN博客.html（https://blog.csdn.net/huanhuanq1209/article/details/71438629）

　　　spacing
　　　spacingAndGlyphs
　　　spacing只调整字符之间的间隔；spacingAndGlyphs则会根据一定比例同时调整字符之间的间隔，以及字符本身宽度。

　　1.3、ZC：属性word-???、属性text-???、属性letter-???

2、

3、测试代码：

　　3.1、基本和 3.2 一样，只是 有注释 3.2没有注释

<?xml version="1.0" encoding="UTF-8"?>
<svg width="1000" height="800" viewBox="-500 -200 1000 800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:cge="http://iec.ch/TC57/2005/SVG-schema#" xmlns:hzsvg="http://holleygrid.cn/svg">

    <style type="text/css">
    <![CDATA[
    <!--
    .fill01
    {
        fill :red;
    }
    -->
    ]]>
    </style>

    <script type="text/javascript" >
    <![CDATA[
    <!--

    function AttributeMap(_eleTextFrom, _eleTextTo)
    {
        // ZC: 在自己绘图的时候，我们未用到 class属性(style属性貌似也没有用到)，于是_eleTextFrom中有哪些属性，通过节点遍历一下就行
        // ZC:    不需要通过 window.getComputedStyle(...)来全部获取

        // ZC: visibility 属性放置在 普通属性的位置
        // ZC: 映射(map)来的属性，都放置到style中，这样 删除的时候 只要直接遍历 style里面的属性就行了(也不用将属性写到节点上面去)

        // ZC: (1) 清空 _eleTextTo的style属性里面的信息
        while (_eleTextTo.style.length > 0)
            _eleTextTo.style.removeProperty(_eleTextTo.style.item(0));

        // ZC: (2) 将_eleTextFrom的属性 放入到 _eleTextTo中
        var attrs = _eleTextFrom.attributes;  //得到所有属性 attrs-->NamedNodeMap(https://developer.mozilla.org/zh-CN/docs/Web/API/NamedNodeMap)
        for (var i=0; i<attrs.length; i++)
        {
            console.log(attrs[i].name + " : " + attrs[i].value);
            _eleTextTo.style.setProperty(attrs[i].name, attrs[i].value);
        }
    }

    function TextWordwrap_Vertical(_eleText, _eleText_hidden, _iHeight, _strNS, _strText, _bLeft2Right)
    {
        if (_strText.length <= 0)
            return;

        _eleText.innerHTML = "";

        // ZC: 还要将 _eleText_hidden的属性设置成和_eleText的属性 一样的 (font-size / font-family 等)
        AttributeMap(_eleText, _eleText_hidden);
        console.log("");

            _eleText_hidden.innerHTML = "";
            var nodeText_hidden = document.createTextNode(_strText[0]);
            _eleText_hidden.appendChild(nodeText_hidden);

        var iFirstSpanWidth = 0;// ZC: _eleText中第一行<span/>的宽度
        var iPrevSpanHeight = 0;// ZC: _eleText中上一行<span/>的高度

        if (_strText.length > 1)
        {
            var iCntPrev = 0;
            var eleTspan = null;
            var nodeText = null;
            var bFirstTspan = true;

            for (var i=1; i<_strText.length; i++)
            {
                //var rtShort = _eleText_hidden.getBBox();
                //var iHeightPrev = rtShort.height;
                //var iHeightPrev = _eleText_hidden.getComputedTextLength();

                iCntPrev = _eleText_hidden.firstChild.data.length;
                _eleText_hidden.firstChild.data += _strText[i];

                //var iHeight = _eleText_hidden.getComputedTextLength();
                var rtLong = _eleText_hidden.getBBox();
                var iHeight = rtLong.height;
                if (iHeight > _iHeight)
                {
                    //var pt = _eleText_hidden.getStartPositionOfChar(_eleText_hidden.getNumberOfChars() - 1);
                    //var iHeightPrev = pt.y - rtLong.y;
                    // ZC: 上面的方式：chrome[版本 68.0.3440.106(正式版本)(32 位)] 和 Qt5.3.2的QWebView效果不同
                    var rtLast = _eleText_hidden.getExtentOfChar(_eleText_hidden.getNumberOfChars() - 1);
                    var iHeightPrev = rtLast.y - rtLong.y;
                    //alert(iHeightPrev + " , " + pt.y + " , " + rtLong.y);

                    _eleText_hidden.firstChild.data = _eleText_hidden.firstChild.data.slice(0, iCntPrev);

                    eleTspan = document.createElementNS(_strNS, "tspan");
                    _eleText.appendChild(eleTspan);
                    nodeText = document.createTextNode(_eleText_hidden.firstChild.data);
                    eleTspan.appendChild(nodeText);

                    if (bFirstTspan)
                    {
                        var rt = _eleText.getBBox();
                        iFirstSpanWidth = rt.width;
                        bFirstTspan = false;

                            console.log("iFirstSpanWidth : " + iFirstSpanWidth);
                    }
                    else
                    {

                        eleTspan.setAttribute("dy", (-iPrevSpanHeight) + "");
                        if (_bLeft2Right)
                            eleTspan.setAttribute("dx", (iFirstSpanWidth) + "");
                        else
                            eleTspan.setAttribute("dx", (-iFirstSpanWidth) + "");

                            console.log("dx : " + (-iPrevSpanHeight));
                            console.log("dy : " + (iFirstSpanWidth));
                    }

                    _eleText_hidden.firstChild.data = _strText[i];
                    iPrevSpanHeight = iHeightPrev;

                        console.log("");
                }// if
            }// for

            if (iCntPrev > 0)
            {
                eleTspan = document.createElementNS(_strNS, "tspan");
                _eleText.appendChild(eleTspan);
                nodeText = document.createTextNode(_eleText_hidden.firstChild.data);
                eleTspan.appendChild(nodeText);

                eleTspan.setAttribute("dy", (-iPrevSpanHeight) + "");
                if (_bLeft2Right)
                    eleTspan.setAttribute("dx", (iFirstSpanWidth) + "");
                else
                    eleTspan.setAttribute("dx", (-iFirstSpanWidth) + "");
            }
        }// if
    }

        window.onload = function(evt)
        {
    /*
        var text01 = document.getElementById("text01");
        console.log("text01.getComputedTextLength() : " + text01.getComputedTextLength());
        var rt = text01.getBBox();
        console.log(rt.x + " , " + rt.y + " , " + rt.width + " , " + rt.height);
    //*/    

            //*
                var strTextContent = "中文测试text内容。中文测试text内容。中文测试text内容。中文测试text内容。中文测试text内容。中文测试text内容。中文测试text内容。中文测试text内容。";
            //    var strTextContent = "中文测试text内";
                var eleSvg = document.getElementsByTagName("svg")[0];
                var strNS = eleSvg.getAttribute("xmlns");
                
                var eleText = document.createElementNS(strNS, "text");
                eleSvg.appendChild(eleText);

                eleText.setAttribute("x", "-100");
                eleText.setAttribute("y", "0");
                eleText.setAttribute("writing-mode", "tb");
                eleText.setAttribute("letter-spacing", "12px");


                var textCalcLength = document.getElementById("textCalcLength");

                TextWordwrap_Vertical(eleText, textCalcLength, 200, strNS, strTextContent, true);
            //*/

    //*
        var zzz = document.getElementById("zzz");
        var rt = zzz.getBBox();
        console.log(rt.x + " , " + rt.y + " , " + rt.width + " , " + rt.height);
        //console.log(zzz.);

        console.log("");
        console.log("zzz.getComputedTextLength() : " + zzz.getComputedTextLength());
        var pt = zzz.getEndPositionOfChar(zzz.getNumberOfChars() - 1);
        console.log("pt : " + pt +" , "+ pt.x +" , "+ pt.y);
        pt = zzz.getStartPositionOfChar(zzz.getNumberOfChars() - 2);
        console.log("pt : " + pt +" , "+ pt.x +" , "+ pt.y);

        console.log("zzz.getSubStringLength() : " + zzz.getSubStringLength(0, 11));
        console.log("zzz : " + zzz);
        rt = zzz.getExtentOfChar(11);
        console.log("zzz.getExtentOfChar() : " + rt.x + " , " + rt.y + " , " + rt.width + " , " + rt.height);
        };
    -->
    ]]>
    </script>

<!-- style="fontSize:10px;" style="fill:blue;" style="visibility:visible; fontSize:10px; visibility:hidden; " font-size="10px" -->
<text id="text01" x="-400" y="-150" writing-mode="tb" letter-spacing="5px" zz="cc" class="fill01" style="font-size:10px;" >
    测试1，测试2，测试3，测试4，测试5。abcdefg.1234567890.
</text>

<text x="-300" y="-150" style="writing-mode:tb;" >
    测试1，测试2，测试3，测试4，测试5。abcdefg.1234567890.
</text>

<text x="-200" y="-150" writing-mode="tb" >
    <tspan >测试1，测试2，测试3，测试4，测试5，</tspan>
    <tspan dx="21" y="-150">测试6，测试7，测试8，测试9，测试10。</tspan>
    <tspan dx="21" y="-150">abcdefg.1234567890.</tspan>
</text>



<!--  visibility="hidden" -->
<text id="textCalcLength" />


<text id="zzz" x="100" y="0" writing-mode="tb" >
    <tspan>中文测试text内容。中</tspan>
    <!--
    <tspan dx="21" dy="-192.109375">文测试text内容</tspan>
    -->
</text>

<!--
<text id="zzz" x="100" y="0" writing-mode="tb" >中文测试text内容。中</text>
-->

<text x="145" y="0" writing-mode="tb" >
    <tspan>中文测试text内容。中</tspan>
    <tspan dx="21" >文测试text内容</tspan>
</text>


<text id="ccc" x="130" y="-100" >
    <tspan>文测试text内容</tspan>
</text>


<rect x="89.5" y="0" width="21" height="252" stroke="red" fill="none"/>
<!--
<rect x="89.5" y="0" width="21" height="192.109375" stroke="red" fill="none"/>
-->
<rect x="129" y="-117" width="230.109375" height="21" stroke="red" fill="none"/>

<circle cx="93.5" cy="176.109375" r="2" fill="red" />

<rect x="89.5" y="176.109375" width="21" height="16" stroke="blue" fill="none"/>

<rect x="0" y="208" width="5" height="5" stroke="blue" fill="none"/>

  
</svg>

　　3.2、没注释的代码 和3.1一样

<?xml version="1.0" encoding="UTF-8"?>
<svg width="1000" height="800" viewBox="-500 -200 1000 800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:cge="http://iec.ch/TC57/2005/SVG-schema#" xmlns:hzsvg="http://holleygrid.cn/svg">

    <style type="text/css">
    <![CDATA[
    <!--
    .fill01
    {
        fill :red;
    }
    -->
    ]]>
    </style>

    <script type="text/javascript" >
    <![CDATA[
    <!--

    function AttributeMap(_eleTextFrom, _eleTextTo)
    {
        while (_eleTextTo.style.length > 0)
            _eleTextTo.style.removeProperty(_eleTextTo.style.item(0));

        var attrs = _eleTextFrom.attributes;
        for (var i=0; i<attrs.length; i++)
            _eleTextTo.style.setProperty(attrs[i].name, attrs[i].value);
    }

    function TextWordwrap_Horizontal(_eleText, _eleText_hidden, _iWidth, _strNS, _strText)
    {
        if (_strText.length <= 0)
            return;

        _eleText.innerHTML = "";
        AttributeMap(_eleText, _eleText_hidden);

            _eleText_hidden.innerHTML = "";
            var nodeText_hidden = document.createTextNode(_strText[0]);
            _eleText_hidden.appendChild(nodeText_hidden);

        var iFirstSpanHeight = 0;
        var iPrevSpanWidth = 0;

        if (_strText.length > 1)
        {
            var iCntPrev = 0;
            var eleTspan = null;
            var nodeText = null;
            var bFirstTspan = true;

            for (var i=1; i<_strText.length; i++)
            {
                iCntPrev = _eleText_hidden.firstChild.data.length;
                _eleText_hidden.firstChild.data += _strText[i];

                var rtLong = _eleText_hidden.getBBox();
                var iWidth = rtLong.width;
                if (iWidth > _iWidth)
                {
                    var rtLast = _eleText_hidden.getExtentOfChar(_eleText_hidden.getNumberOfChars() - 1);
                    var iWidthPrev = rtLast.x - rtLong.x;

                    _eleText_hidden.firstChild.data = _eleText_hidden.firstChild.data.slice(0, iCntPrev);

                    eleTspan = document.createElementNS(_strNS, "tspan");
                    _eleText.appendChild(eleTspan);
                    nodeText = document.createTextNode(_eleText_hidden.firstChild.data);
                    eleTspan.appendChild(nodeText);

                    if (bFirstTspan)
                    {
                        var rt = _eleText.getBBox();
                        iFirstSpanHeight = rt.height;
                        bFirstTspan = false;
                    }
                    else
                    {
                        eleTspan.setAttribute("dx", (-iPrevSpanWidth) + "");
                        eleTspan.setAttribute("dy", (iFirstSpanHeight) + "");
                    }

                    _eleText_hidden.firstChild.data = _strText[i];
                    iPrevSpanWidth = iWidthPrev;
                }// if
            }// for

            if (iCntPrev > 0)
            {
                eleTspan = document.createElementNS(_strNS, "tspan");
                _eleText.appendChild(eleTspan);
                nodeText = document.createTextNode(_eleText_hidden.firstChild.data);
                eleTspan.appendChild(nodeText);

                eleTspan.setAttribute("dx", (-iPrevSpanWidth) + "");
                eleTspan.setAttribute("dy", (iFirstSpanHeight) + "");
            }
        }// if
    }

    function TextWordwrap_Vertical(_eleText, _eleText_hidden, _iHeight, _strNS, _strText, _bLeft2Right)
    {
        if (_strText.length <= 0)
            return;

        _eleText.innerHTML = "";
        AttributeMap(_eleText, _eleText_hidden);

            _eleText_hidden.innerHTML = "";
            var nodeText_hidden = document.createTextNode(_strText[0]);
            _eleText_hidden.appendChild(nodeText_hidden);

        var iFirstSpanWidth = 0;
        var iPrevSpanHeight = 0;

        if (_strText.length > 1)
        {
            var iCntPrev = 0;
            var eleTspan = null;
            var nodeText = null;
            var bFirstTspan = true;

            for (var i=1; i<_strText.length; i++)
            {
                iCntPrev = _eleText_hidden.firstChild.data.length;
                _eleText_hidden.firstChild.data += _strText[i];

                var rtLong = _eleText_hidden.getBBox();
                var iHeight = rtLong.height;
                if (iHeight > _iHeight)
                {
                    var rtLast = _eleText_hidden.getExtentOfChar(_eleText_hidden.getNumberOfChars() - 1);
                    var iHeightPrev = rtLast.y - rtLong.y;

                    _eleText_hidden.firstChild.data = _eleText_hidden.firstChild.data.slice(0, iCntPrev);

                    eleTspan = document.createElementNS(_strNS, "tspan");
                    _eleText.appendChild(eleTspan);
                    nodeText = document.createTextNode(_eleText_hidden.firstChild.data);
                    eleTspan.appendChild(nodeText);

                    if (bFirstTspan)
                    {
                        var rt = _eleText.getBBox();
                        iFirstSpanWidth = rt.width;
                        bFirstTspan = false;
                    }
                    else
                    {

                        eleTspan.setAttribute("dy", (-iPrevSpanHeight) + "");
                        if (_bLeft2Right)
                            eleTspan.setAttribute("dx", (iFirstSpanWidth) + "");
                        else
                            eleTspan.setAttribute("dx", (-iFirstSpanWidth) + "");
                    }

                    _eleText_hidden.firstChild.data = _strText[i];
                    iPrevSpanHeight = iHeightPrev;
                }// if
            }// for

            if (iCntPrev > 0)
            {
                eleTspan = document.createElementNS(_strNS, "tspan");
                _eleText.appendChild(eleTspan);
                nodeText = document.createTextNode(_eleText_hidden.firstChild.data);
                eleTspan.appendChild(nodeText);

                eleTspan.setAttribute("dy", (-iPrevSpanHeight) + "");
                if (_bLeft2Right)
                    eleTspan.setAttribute("dx", (iFirstSpanWidth) + "");
                else
                    eleTspan.setAttribute("dx", (-iFirstSpanWidth) + "");
            }
        }// if
    }

        window.onload = function(evt)
        {
    /*
        var text01 = document.getElementById("text01");
        console.log("text01.getComputedTextLength() : " + text01.getComputedTextLength());
        var rt = text01.getBBox();
        console.log(rt.x + " , " + rt.y + " , " + rt.width + " , " + rt.height);
    //*/    

            //*
                var strTextContent = "中文测试text内容。中文测试text内容。中文测试text内容。中文测试text内容。中文测试text内容。中文测试text内容。中文测试text内容。中文测试text内容。";
            //    var strTextContent = "中文测试text内";
                var eleSvg = document.getElementsByTagName("svg")[0];
                var strNS = eleSvg.getAttribute("xmlns");
                
                var eleText = document.createElementNS(strNS, "text");
                eleSvg.appendChild(eleText);

                eleText.setAttribute("x", "-100");
                eleText.setAttribute("y", "0");
                eleText.setAttribute("writing-mode", "tb");
                eleText.setAttribute("letter-spacing", "12px");


                var textCalcLength = document.getElementById("textCalcLength");

                TextWordwrap_Vertical(eleText, textCalcLength, 200, strNS, strTextContent, true);
            //*/

    //*
        var zzz = document.getElementById("zzz");
        var rt = zzz.getBBox();
        console.log(rt.x + " , " + rt.y + " , " + rt.width + " , " + rt.height);
        //console.log(zzz.);

        console.log("");
        console.log("zzz.getComputedTextLength() : " + zzz.getComputedTextLength());
        var pt = zzz.getEndPositionOfChar(zzz.getNumberOfChars() - 1);
        console.log("pt : " + pt +" , "+ pt.x +" , "+ pt.y);
        pt = zzz.getStartPositionOfChar(zzz.getNumberOfChars() - 2);
        console.log("pt : " + pt +" , "+ pt.x +" , "+ pt.y);

        console.log("zzz.getSubStringLength() : " + zzz.getSubStringLength(0, 11));
        console.log("zzz : " + zzz);
        rt = zzz.getExtentOfChar(11);
        console.log("zzz.getExtentOfChar() : " + rt.x + " , " + rt.y + " , " + rt.width + " , " + rt.height);
        };
    -->
    ]]>
    </script>

<!-- style="fontSize:10px;" style="fill:blue;" style="visibility:visible; fontSize:10px; visibility:hidden; " font-size="10px" -->
<text id="text01" x="-400" y="-150" writing-mode="tb" letter-spacing="5px" zz="cc" class="fill01" style="font-size:10px;" >
    测试1，测试2，测试3，测试4，测试5。abcdefg.1234567890.
</text>

<text x="-300" y="-150" style="writing-mode:tb;" >
    测试1，测试2，测试3，测试4，测试5。abcdefg.1234567890.
</text>

<text x="-200" y="-150" writing-mode="tb" >
    <tspan >测试1，测试2，测试3，测试4，测试5，</tspan>
    <tspan dx="21" y="-150">测试6，测试7，测试8，测试9，测试10。</tspan>
    <tspan dx="21" y="-150">abcdefg.1234567890.</tspan>
</text>



<!--  visibility="hidden" -->
<text id="textCalcLength" />


<text id="zzz" x="100" y="0" writing-mode="tb" >
    <tspan>中文测试text内容。中</tspan>
    <!--
    <tspan dx="21" dy="-192.109375">文测试text内容</tspan>
    -->
</text>

<!--
<text id="zzz" x="100" y="0" writing-mode="tb" >中文测试text内容。中</text>
-->

<text x="145" y="0" writing-mode="tb" >
    <tspan>中文测试text内容。中</tspan>
    <tspan dx="21" >文测试text内容</tspan>
</text>


<text id="ccc" x="130" y="-100" >
    <tspan>文测试text内容</tspan>
</text>


<rect x="89.5" y="0" width="21" height="252" stroke="red" fill="none"/>
<!--
<rect x="89.5" y="0" width="21" height="192.109375" stroke="red" fill="none"/>
-->
<rect x="129" y="-117" width="230.109375" height="21" stroke="red" fill="none"/>

<circle cx="93.5" cy="176.109375" r="2" fill="red" />

<rect x="89.5" y="176.109375" width="21" height="16" stroke="blue" fill="none"/>

<rect x="0" y="208" width="5" height="5" stroke="blue" fill="none"/>

  
</svg>

　　3.3、测试的 一些信息

<?xml version="1.0" encoding="UTF-8"?>
<svg width="1000" height="800" viewBox="-500 -200 1000 800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:cge="http://iec.ch/TC57/2005/SVG-schema#" xmlns:hzsvg="http://holleygrid.cn/svg">

    <script type="text/javascript" >
    <![CDATA[
    <!--

    // ZC: 动态的在SVG中绘制一个矩形
    function DynamicCreateRect(_x, _y, _width, _height, _stroke, _strokeWidth, _fill)
    {
        var eleSvg = document.getElementsByTagName("svg")[0];
        var strNS = eleSvg.getAttribute("xmlns");

        var rect = document.createElementNS(strNS, "rect");
        eleSvg.appendChild(rect);

        rect.setAttribute("x", _x);
        rect.setAttribute("y", _y);
        rect.setAttribute("width",  _width);
        rect.setAttribute("height", _height);

        rect.setAttribute("stroke", _stroke);
        rect.setAttribute("stroke-width", _strokeWidth);
        rect.setAttribute("fill", _fill);
    }

        window.onload = function(evt)
        {
        var text01 = document.getElementById("text01");
        var text02 = document.getElementById("text02");
        var text03 = document.getElementById("text03");

        var tspan0201 = document.getElementById("tspan0201");
        var tspan0202 = document.getElementById("tspan0202");
        var tspan0301 = document.getElementById("tspan0301");

        var rt01 = text01.getBBox();
        var rt02 = text02.getBBox();
        var rt03 = text03.getBBox();

        var rt0201 = tspan0201.getBBox();
        var rt0202 = tspan0202.getBBox();
        var rt0301 = tspan0301.getBBox();

        // ZC: 说明 隐藏的 <text/>照样也是绘制出来了，只是肉眼看不到
        console.log(rt01.x + ", " + rt01.y + ", " + rt01.width + ", " + rt01.height);
        console.log("");

        // ZC: <text/>的BBox()矩形 和 <tspan/>的BBox()矩形 在数值上是一样的 - (1)
        console.log(rt02.x + ", " + rt02.y + ", " + rt02.width + ", " + rt02.height);
        console.log(rt0201.x + ", " + rt0201.y + ", " + rt0201.width + ", " + rt0201.height);
        console.log(rt0202.x + ", " + rt0202.y + ", " + rt0202.width + ", " + rt0202.height);
        console.log("");

        // ZC: <text/>的BBox()矩形 和 <tspan/>的BBox()矩形 在数值上是一样的 - (2)
        console.log(rt03.x + ", " + rt03.y + ", " + rt03.width + ", " + rt03.height);
        console.log(rt0301.x + ", " + rt0301.y + ", " + rt0301.width + ", " + rt0301.height);
        console.log("");



        DynamicCreateRect(-200, 400, 200, 21, "red", "1", "none");

//*
        // ZC: <text/>没有 innerText属性
        var testText01 = document.getElementById("testText01");
        for (z in testText01)
            console.log(z + " ==> " + testText01[z]);
        console.log("");

        var testText01 = document.getElementById("testText01");
            console.log("testText01.childNodes.length : " + testText01.childNodes.length);
        testText01.innerHTML = "";// ZC: 这个时候 
            console.log("testText01.childNodes.length : " + testText01.childNodes.length);
        testText01.innerHTML = "A";
            console.log("testText01.childNodes.length : " + testText01.childNodes.length + " , " + testText01.childNodes[0].nodeType);
//*/
        };
    -->
    ]]>
    </script>


<!-- 这里可以看出 tspan的dy是针对上一个tspan而言的(相信dx也是同样的原理) -->
<text x="-400" y="-150" >
    <tspan x="-400">测试1，测试2，测试3，测试4，测试5，</tspan>
    <tspan x="-400" dy="21">测试6，测试7，测试8，测试9，测试10。</tspan>
    <tspan x="-400" dy="21">abcdefg.1234567890.</tspan>
</text>

<!-- 貌似上面说的也不全对...可以理解成:tspan的dy是针对上一个 文本段落而言的(dx应该也是同样的原理) -->
<text x="0" y="-150" >
    测试1，测试2，测试3，测试4，测试5，
    <tspan x="0" dy="21">测试6，测试7，测试8，测试9，测试10。</tspan>
    <tspan x="0" dy="21">abcdefg.1234567890.</tspan>
</text>



<text id="text01" x="-400" y="-100" visibility="hidden">1234567890</text>

<!-- tspan不设置 dx&dy或x&y属性的话，就和一般的 text元素看上去一样 -->
<text id="text02" x="-400" y="-50" >
    <tspan id="tspan0201">测试1，测试2，测试3，测试4，测试5，</tspan>
    <tspan id="tspan0202">测试6，测试7，测试8，测试9，测试10。</tspan>
</text>
<text id="text03" x="-400" y="50" >
    测试1，测试2，测试3，测试4，测试5，
    <tspan id="tspan0301">测试6，测试7，测试8，测试9，测试10。</tspan>
</text>


<rect x="0" y="0" width="100" height="1" stroke="none" fill="blue"/>

<text x="-100" y="200" id="text01" >
    <tspan id="text0101">Whatever text you want</tspan>
    <tspan id="text0102" dx="0" dy="21">here. 1234567890.1234567890</tspan>
</text>

<text id="testText01" />

  
</svg>
<?DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"?>

 

4、

5、

 

转载于:https://www.cnblogs.com/h5skill/p/9543331.html

weixin_30571465
关注
html5 svg插件,html5轻量级操纵和制作SVG动画的js库-svg.js
weixin_39743369的博客
06-10 670
svg.js是一个轻量级的操纵和制作SVG动画的js插件库。svg.js没有任何的外部依赖，它遵循麻省理工学院的许可( MIT License)下许可证的条款。使用方法插入一个SVG可以使用SVG()方法在指定的元素中创建一个SVG。var draw = SVG('drawing').size(300, 300)var rect = draw.rect(100, 100).attr({ fill:...
html中的text标签怎么设置自动换行,HTMLspan标签如何做到自动换行？HTMLspan标签的用法介绍...
weixin_36256978的博客
05-30 2360
本篇文章主要的为大家讲述的是HTML span标签是怎么做到自动换行的，介绍了span的七个属性的使用和介绍。接下来我们一起来看这篇文章吧首先我们介绍的肯定是如何做到让span标签自动换行的，我们先看一下这个例子：这是随便可以输入的内容；这是随便可以输入的内容；这是随便可以输入的内容；这是随便可以输入的内容；这是随便可以输入的内容；这是随便可以输入的内容；这是随便可以输入的内容；这是随便可以输入的...
用SVG实现垂直滚动文本
03-22
NULL 博文链接：https://chen4w.iteye.com/blog/1003785
SVG里面的字体无法竖直排列解决方案
u012282382的博客
03-27 2157
用foreignObject 即可,至于文字样式自己看着办吧。呵呵 <svg xmlns="http://www.w3.org/2000/svg"> <foreignObject width="120" height="50"> <body xmlns="http://www.w3.org/1999/xhtml"> &lt...
d3plus-text：智能SVG文本框——自动换行与字体缩放
最新发布
gitblog_00089的博客
09-02 866
d3plus-text：智能SVG文本框——自动换行与字体缩放 d3plus-textA smart SVG text box with line wrapping and automatic font size scaling.项目地址:https://gitcode.com/gh_mirrors/d3/d3plus-text 项目介绍 d3plus-text 是一个用于SVG环境的智能文本处...
SVG_9_线性颜色渐变_竖排文字_动画
知识搬运工，资料任你拿，包括书籍、电影、电视剧、网站、软件等，VX公人人人号：向前书局
05-04 1210
知识点： linearGradient线性颜色渐变 text竖排文字-writing-mode animateMotion动画 先来说说text竖排文字，text默认是横排的，那怎样要竖排呢，其实很简单，就是一个属性的设置。 垂直字体设置writing-mode属性设置为tb即可。 writing-mode="tb" 在text标签中，添加writin...
SVG动态修改Text的文本
热门推荐
Pipi0714的专栏
11-11 1万+
SVG 动态修改Text的文本
使用svg创建动态水印内容
Jioho的博客
05-31 1982
使用 svg 代替 canvas 做水印其实也是为了方便快捷，减少了 canvas 的渲染导出图片的操作，很好的利用了 svg 可以作为背景图的特性
D3.js实现文本的换行详解
10-21
在D3.js中，当你需要在SVG中展示长文本并希望它能自动换行时，会发现`<text>`元素默认并不支持这一功能。本文将详细介绍如何利用D3.js实现SVG文本的换行。 首先，我们需要理解问题的核心所在。假设我们有一段长文本...
CSS2.0_ref.rar_css_javascript_网页设计
09-21
4. 盒阴影与文字阴影：CSS2.0引入了box-shadow和text-shadow属性，为元素添加阴影效果，提升视觉层次感。 5. 多列布局：CSS2.0提供了column-count、column-gap、column-rule等属性，使得创建多列布局变得简单。 四...
D3.js封装文本实现自动换行和旋转平移等功能
10-21
本文将介绍一个名为`appendMultiText`的函数，它能够帮助我们在SVG中轻松地创建自动换行的多行文本，并且支持旋转和平移。这个函数是对之前关于SVG中使用`text`和`tspan`元素实现换行功能的进一步封装。 首先，我们...
SVG.js文本包装插件：支持自适应宽度文本换行
资源摘要信息:"svg.textwap.js是一个JavaScript库插件，它的主要功能是扩展SVG（Scalable Vector Graphics）中Text对象的text和tspan方法，以支持文本在特定宽度限制下的自动换行功能。当SVG元素中的文本超出设定的...
HTML5 SVG字体图标点赞动画特效
06-11
17种HTML5 SVG字体图标点赞动画特效，使用font-awesome作为图标，采用SVG技术，在用户点击图标时产生各种炫酷的图标动画特效。
SVG那些小事儿
ywb201314的专栏
11-06 474
SVG是描述二维矢量图形的一种图形格式。也许有人会问，为什么不用canvas，关于SVG与canvas之争这里不做讨论（详见http://msdn.microsoft.com/zh-cn/library/gg193983#Non_Starters）。现在假设一个coder权衡利弊使用了SVG，那么有一些小事是需要注意的。         1 SVG的浏览器检测         SVG作为W3C
html学习 - SVG下动态添加元素
累了就歇一会
05-19 6742
正常情况下，我们在一个页面添加一个元素的时候，非常简单，尤其是使用jquery的情况下。例如下面代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Page</title> </head> <body> <div id="page"> </div> <div id="p
svg中text换行,vml里面textbox实现换行
傾城如夢
04-03 784
svg中text换行： 可以在text中加入tspan元素 例如： 显示： &lt;text id="_Gef_14" x="65px" y="28.75px" text-anchor="middle"&gt; &lt;tspan x="81" y="28.75px" dy="-13"&gt;啊啊啊啊啊啊啊 &lt;/ts
svg -> text文本水平、垂直居中。文本垂直对齐方式
baifu2766的博客
02-07 2282
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> svg{ ...
textContent与innerText的不同
sandy_zc_1的专栏
09-19 1885
很久之前发在boluor的blog上的文章，现在转回自己的blog上。 2009  六月 21 textContent与innerText的不同by  Sandy_zc_1  :因为发现网络上很少有这方面的内容，因此就把自己私有blog上的这篇文章搬出来到Boluor的公开blog，方便其它人查阅。——————————————————————————————————————
tem_texts = tem_g.selectAll('.tem_text').data(tems).join('text').attr('class','tem_text'); tem_texts .attr('x',d=>d.x*svg_x_scale) .attr('y',d=>d.y*svg_y_scale) .text(d=>d.tem) .attr("font-size", 15*svg_y_scale) .attr('fill',d=>get_fill_text(d)) .attr('text-anchor','middle')
07-12
首先，通过选择器`.tem_text`选中一组元素，并将数据`tems`与这组元素进行绑定，如果元素不存在，则创建新元素。 然后，使用`.attr('x',d=>d.x*svg_x_scale)`和`.attr('y',d=>d.y*svg_y_scale)`来设置元素的水平和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值