Question

<div id="maindiv" style="height:60px;width:100px;border:1px solid black;float:left">
    <svg width="100%" height="20">
    <text x="28" y="18" style="text-anchor: start">somedynamictext</text>
    </svg>
</div>

我想设置maindiv的宽度，以便它可以正确包含somedynamictext。 somedynamictext的数量可以是动态的。

我可以在svg文本元素中显示...吗？

根据评论我做了以下

<div id="maindiv" style="height:60px;display:inline-block;border:1px solid black">
    <div id="MATCH" style="height:60px;display:inline-block;border:1px solid black;float:left">
        <svg width="100%" height="20">
            <text x="28" y="18">MATCH</text>
        </svg>
    </div>
    <div id="REGULAR" style="height:60px;display:inline-block;border:1px solid black;float:left">
        <svg width="100%" height="20">
            <text x="28" y="18">REGULAR</text>
        </svg>
    </div>
    <div id="EXPRESSION" style="height:60px;display:inline-block;border:1px solid black;float:left">
        <svg width="100%" height="20">
            <text x="28" y="18">EXPRESSION</text>
        </svg>
    </div>
    <div id="MATCH1" style="height:60px;display:inline-block;border:1px solid black;float:left">
        <svg width="100%" height="20">
            <text x="28" y="18">MATCH1</text>
        </svg>
    </div>
    <div id="REGULAR1" style="height:60px;display:inline-block;border:1px solid black;float:left">
        <svg width="100%" height="20">
            <text x="28" y="18">REGULAR1</text>
        </svg>
    </div>
    <div id="EXPRESSION1" style="height:60px;display:inline-block;border:1px solid black;float:left">
        <svg width="100%" height="20">
            <text x="28" y="18">EXPRESSION1</text>
        </svg>
    </div>
    <div id="MATCH2" style="height:60px;display:inline-block;border:1px solid black;float:left">
        <svg width="100%" height="20">
            <text x="28" y="18">MATCH2</text>
        </svg>
    </div>
    <div id="REGULAR2" style="height:60px;display:inline-block;border:1px solid black;float:left">
        <svg width="100%" height="20">
            <text x="28" y="18">REGULAR2</text>
        </svg>
    </div>
    <div id="EXPRESSION2" style="height:60px;display:inline-block;border:1px solid black;float:left">
        <svg width="100%" height="20">
            <text x="28" y="18">EXPRESSION2</text>
        </svg>
    </div>
</div>

我无法根据文字长度减少div的大小。

Answer 1

您可以使用

获取每个svg元素的高度和宽度

var svgCoord=svg.getBoundingClientRect();
var svgHeight=svgCoord.height;

然后将所有svg元素的高度设置为maindiv。

document.getElementById（“maindiv”）。setAttribute（“height”，“所有svg的高度之和”）;

设置包含svg文本元素的div的大小

1 个答案: