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