SVGForeignObjectElement: width property
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính chỉ đọc width của giao diện SVGForeignObjectElement mô tả chiều rộng của phần tử <foreignObject>. Nó phản ánh giá trị tính toán của thuộc tính width trên phần tử <foreignObject>.
Giá trị thuộc tính là một <length>, <percentage>, hoặc <number>. Giá trị số của SVGAnimatedLength.baseVal là tọa độ y của phần tử <foreignObject> trong hệ tọa độ người dùng.
Giá trị
Một SVGAnimatedLength.
Ví dụ
Cho SVG sau:
html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<foreignObject id="object1" x="50" y="75" width="100" height="50">
<div xmlns="http://www.w3.org/1999/xhtml">
<p>This is a foreign object.</p>
</div>
</foreignObject>
<foreignObject id="object2" x="25%" y="50%" width="10%" height="10%">
<div xmlns="http://www.w3.org/1999/xhtml">
<p>This is another foreign object.</p>
</div>
</foreignObject>
</defs>
<rect x="0" y="0" width="200" height="100" fill="lightblue" />
<rect x="0" y="100" width="200" height="100" fill="lightgreen" />
</svg>
Chúng ta có thể truy cập các giá trị tính toán của thuộc tính width:
js
const foreignObjects = document.querySelectorAll("foreignObject");
const widthObject1 = foreignObjects[0].width;
const widthObject2 = foreignObjects[1].width;
console.dir(widthObject1.baseVal.value); // output: 100
console.dir(widthObject2.baseVal.value); // output: 20 (10% của 200)
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGForeignObjectElement__width |