获取SVG文字的长度和高度

获取SVG文字的长度和高度

body {
font-family: sans-serif;
font-size: 0.7em;
}

pre {
position: absolute;
top: 0px;
left: 180px;
font-size: 1.3em;
}

svg {
shape-rendering: crispEdges;
border: 3px solid black;
}

table {
border-collapse: collapse;
}

th, td {
padding: 2px;
}

td:nth-child(3) {
text-align: right;
}

text {
font-size: 2em;
}

test1

test3

test4

<svg width="150" height="150">
    <text id="test1" y="50">test1</text>
    <text id="test2" y="100">
        <tspan id="test3">test3</tspan> 
    </text>
    <tspan id="test4">test4</tspan>
</svg>

id	Code	Result	Note
test1	document.getElementById(“test1”).getBBox().width		Integer in Chrome; Float in IE and Firefox.
test2	document.getElementById(“test2”).getBBox().width		Integer in Chrome; Float in IE and Firefox.
test3	document.getElementById(“test3”).getBBox().width		IE and Firefox can’t get the BBox of a TSPAN and error out.
test4	document.getElementById(“test4”).getBBox().width		IE and Firefox can’t get the BBox of a TSPAN whether it’s inside a TEXT or not.
test1	document.getElementById(“test1”).getBoundingClientRect().width		Integer in IE, Chrome and Safari. Same width as “test2” in Chrome eventhough 1 is narrower than 2.
test2	document.getElementById(“test2”).getBoundingClientRect().width		Integer in IE, Chrome and Safari. Same width as “test1” in Chrome eventhough 2 is wider than 1.
test3	document.getElementById(“test3”).getBoundingClientRect().width		Integer in Chrome and Safari.
test4	document.getElementById(“test4”).getBoundingClientRect().width		Integer in Chrome and Safari.
test1	document.getElementById(“test1”).getComputedTextLength()		Integer in Chrome; Float in IE and Firefox.
test2	document.getElementById(“test2”).getComputedTextLength()		Integer in Chrome; Float in IE and Firefox.
test3	document.getElementById(“test3”).getComputedTextLength()		Integer in Chrome; Float in IE and Firefox.
test4	document.getElementById(“test4”).getComputedTextLength()		A TSPAN which is not in a TEXT has no width

document.body.onload = function () { document.getElementById("result1a").innerHTML = document.getElementById("test1").getBBox().width; document.getElementById("result2a").innerHTML = document.getElementById("test2").getBBox().width; try { document.getElementById("result3a").innerHTML = document.getElementById("test3").getBBox().width; } catch(e) { document.getElementById("result3a").innerHTML = e.message; } try { document.getElementById("result4a").innerHTML = document.getElementById("test4").getBBox().width; } catch(e) { document.getElementById("result4a").innerHTML = e.message; } document.getElementById("result1b").innerHTML = document.getElementById("test1").getBoundingClientRect().width; document.getElementById("result2b").innerHTML = document.getElementById("test2").getBoundingClientRect().width; document.getElementById("result3b").innerHTML = document.getElementById("test3").getBoundingClientRect().width; document.getElementById("result4b").innerHTML = document.getElementById("test4").getBoundingClientRect().width; document.getElementById("result1c").innerHTML = document.getElementById("test1").getComputedTextLength(); document.getElementById("result2c").innerHTML = document.getElementById("test2").getComputedTextLength(); document.getElementById("result3c").innerHTML = document.getElementById("test3").getComputedTextLength(); document.getElementById("result4c").innerHTML = document.getElementById("test4").getComputedTextLength(); }