在Angular中测量svg元素的尺寸 [英] Measuring dimensions of svg elements in Angular
问题描述
我正在尝试使用SVG在Angular中创建类似于量规的组件以绘制形状.我想将文本居中放置在一个矩形内.文本将根据量规的值而变化,因此,我想调整字体大小,以使该值适合矩形.另外,我可以调整数字格式(例如,如果字符串太长,请使用科学计数法)以适合矩形.
I am trying to create a gauge like component in Angular using SVG to draw the shapes. I would like to center the text within a rectangle. The text will change depending on the value of the gauge, therefore, I would like to either adjust the font size such that the value fits in the rectangle. Alternatively, I could adjust the number format (e.g. scientific notation if the string is too long) such that it fits the rectangle.
我遇到的问题是,当我尝试测量svg元素(矩形和文本)的尺寸时,本机元素的getBoundingClientRect()
返回零.我正在通过@ViewChild() : ElementRef
获取本机元素.有更好的方法吗?
The problem I am having is that when I attempt the measure the dimensions of the svg elements (both the rectangle and the text), the getBoundingClientRect()
for the native elements return zero. I am getting the native element via @ViewChild() : ElementRef
. Is there a better way to do this?
我整理了一个堆栈闪电,尝试获取文本的尺寸时会显示该问题.它与我的本地副本的不同之处在于矩形确实返回了尺寸.我正在使用Angular 5.2.11,也许差异是由于版本不同造成的吗? 我已经更新了stackblitz: https://stackblitz.com/edit/angular-oz72py
I have put together a stackblitz that shows the issue when attempting to get the dimensions of the text. It differs to my local copy in that the rectangle does return a dimension. I am using Angular 5.2.11, perhaps the difference is due to differing versions? I have updated the stackblitz: https://stackblitz.com/edit/angular-oz72py
我在下面添加了app.component.ts及其html模板
I am adding the app.component.ts and its html template below
import { Component,OnInit, ViewChild,ElementRef } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
@ViewChild('containerRect') containerRect : ElementRef;
@ViewChild('valueText') valueText : ElementRef;
valueStr="2512323.0";
ngOnInit()
{
console.log('container bounds:',
this.containerRect.nativeElement.getBoundingClientRect().width);
console.log('text bounds:',
this.valueText.nativeElement.getBoundingClientRect().width)
}
}
app.component.html:
The app.component.html:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
<svg:rect x="0" y="0" width="100%" height="100%" fill="00AA00"/>
<svg:circle cx="60" cy="60" r="60" fill="#C3002F"/>
<svg:path d="M 60 110
A 50 50 0 1 1 110 60
L 100 60
A 40 40 1 1 0 60 100
Z"
fill="#DDDDDD" fill-opacity="1"/>
<svg:path d="M 60 110
A 50 50 0 0 1 10 60
L 20 60
A 40 40 1 0 0 60 100
Z"
fill="#888888" fill-opacity="1"/>
<svg:rect #containerRect x="29.090373558749814"
y="51.717790556719336"
width="61.81925288250037"
height="16.564418886561327"
fill="#00AA00"/>
<svg:text #valueText font-size="14px"
x="50%" text-anchor="middle" dy="0.95em"
y="51.717790556719336">{{valueStr}}</svg:text>
</svg>
推荐答案
ngOnInit()
运行时DOM尚未准备就绪.
The DOM is not ready when ngOnInit()
runs.
相反,将您的代码放入ngAfterViewInit()
Instead, put your code in an ngAfterViewInit()
ngAfterViewInit()
{
console.log('container boundsx:',
this.containerRect.nativeElement.getBBox().width);
console.log('text bounds:',
this.valueText.nativeElement.getBBox().width)
}
我还建议您使用getBBox()
而不是getBoundingClientRect()
. getBBox()
方法以SVG单位返回值.因此,它应该更加准确,不会受到任何缩放的影响,并且与SVG文件中的大小完全匹配.
I also recommend that you use getBBox()
instead of getBoundingClientRect()
. The getBBox()
method returns values in SVG units. So it should be a bit more accurate, won't be affected by any scaling, and matches exactly the sizes in the SVG file.
这篇关于在Angular中测量svg元素的尺寸的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!