如何不使用setAttribute方法初始化SVG的viewBox.baseVal？

Great question! You don't need to manually create an SVGAnimatedRect or rely on setAttribute to initialize your SVG's viewBox—here's how to do it directly via the DOM API:

The Core Solution #

Every SVG element's viewBox property is already an SVGAnimatedRect object provided by the browser. You can directly modify its baseVal (an SVGRect instance) to initialize or update the viewBox values:

const svgDoc = document.querySelector('svg'); // Or your SVG element reference

// Initialize viewBox to "0 0 1 1" directly
svgDoc.viewBox.baseVal.x = 0;
svgDoc.viewBox.baseVal.y = 0;
svgDoc.viewBox.baseVal.width = 1;
svgDoc.viewBox.baseVal.height = 1;

Key Details to Know #

• No need to create SVGAnimatedRect: The browser automatically attaches this object to every SVG element, even if the element doesn't have an initial viewBox attribute. You don't have to instantiate it yourself.
• baseVal is mutable: The baseVal property of SVGAnimatedRect points to a writable SVGRect. Modifying its x, y, width, or height properties will immediately sync to the SVG's actual viewBox attribute (the browser updates the attribute behind the scenes for you).
• One-step shortcut: If you prefer to set all four values at once, use the SVGRect.setValueNS() method:

  // Sets x=0, y=0, width=1, height=1 in one line
  svgDoc.viewBox.baseVal.setValueNS(null, 0, 0, 1, 1);
  

What to Avoid #

Don't try to assign a new SVGRect instance directly to baseVal—this property is read-only. You can only modify the properties of the existing SVGRect it points to:

// ❌ This won't work! baseVal is read-only
svgDoc.viewBox.baseVal = svgDoc.createSVGRect();

// ✅ This works: modify the existing SVGRect's properties
svgDoc.viewBox.baseVal.width = 100;

内容的提问来源于stack exchange，提问作者Bartosz Matuszewski