作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
通常为了获取 SVG 中任何元素的边界框,我们使用 getBoundingClientRect() 或 getBBox() 分别给出顶部、底部、左侧、右侧、宽度、高度或 x、y、宽度、高度。但是当文本旋转时,这些值不足以获得元素的紧密边界框,因为由这些值形成的框将具有水平和垂直边缘,而不是与文本平行。如何为旋转文本选择紧密边界框,如下图所示。 (文本由 Chrome 检查元素选择器突出显示。)
最佳答案
我想如果你想要 4 个点,你可能必须在边界框上用与元素相同的变换来变换它们。如果只是为了显示,只需对已显示的边界框应用相同的变换即可。我认为如果你想要 4 点,它有点复杂,但可能有更简单的方法。
无论如何,这可能很有用。
我们捕获文本的边界框。
我们抓取元素上的矩阵(在本例中为旋转)。
然后我们将其应用于从边界框收集的所有点。
我添加了更多代码,只是为了在点处创建圆圈,以突出显示它。
var text = document.querySelector('text');
var svg = document.querySelector('svg')
function getTransformedPts( el ) {
var m = el.getCTM();
var bb = el.getBBox();
var tpts = [
matrixXY(m,bb.x,bb.y),
matrixXY(m,bb.x+bb.width,bb.y),
matrixXY(m,bb.x+bb.width,bb.y+bb.height),
matrixXY(m,bb.x,bb.y+bb.height) ]
return tpts;
}
function matrixXY(m,x,y) {
return { x: x * m.a + y * m.c + m.e, y: x * m.b + y * m.d + m.f };
}
var pts = getTransformedPts( text );
for( pt in pts ) {
var c = document.createElementNS("http://www.w3.org/2000/svg","circle");
c.setAttribute('cx', pts[pt].x);
c.setAttribute('cy', pts[pt].y);
c.setAttribute('r',3)
svg.append(c)
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="800" height="800">
<text x="50" y="50" transform="rotate(10)" font-size="30">testing rotated text box points</text>
</svg>
关于javascript - 如何获得 SVG 文本元素的紧密边界框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44178791/
我是一名优秀的程序员,十分优秀!