SVGSVGElement: viewBox 属性
SVGSVGElement 接口的只读属性 viewBox 以 SVGAnimatedRectSVGSVGElement<svg> 属性的 viewBox。
该属性描述了 <svg> 元素的 viewBox 属性，该属性用于定义 <svg> 元素的 x 坐标、y 坐标、宽度和高度。SVGAnimatedRect.baseValSVGAnimatedRect.animValSVGRectviewBox 未定义，则为 null。这些对象的组件可能与 SVGSVGElement.xSVGSVGElement.ySVGSVGElement.widthSVGSVGElement.heightx、y、width 和 height 属性会覆盖 viewBox 属性。
对于非嵌套的 SVG 元素，CSS x、y、width 和 height 属性的值会覆盖任何元素属性，因此由 viewBox 定义的值可能不会反映在元素的显示中。
值
一个 SVGAnimatedRect
示例
给出以下 SVG 开头标签
html
<svg viewBox="-12 -18 200 300" x="5" y="5" height="400" width="600"></svg>
我们可以检索 viewBox 的值，但它们与 xywidthheight
js
const svg = document.querySelector("svg");
const vBox = svg.viewBox;
// The SVGSVGElement viewBox property
console.dir(vBox); // SVGAnimatedRect { baseVal: SVGRect, animVal: SVGRect }
console.log(vBox.baseVal.x); // -12
console.log(vBox.baseVal.y); // -18
console.log(vBox.baseVal.width); // 200
console.log(vBox.baseVal.height); // 300
// Other SVGSVGElement properties
console.log(svg.x); // 5
console.log(svg.y); // 5
console.log(svg.width); // 400
console.log(svg.height); // 600
规范
| 规范 |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGFitToViewBox__viewBox |
浏览器兼容性
加载中…