Eigenschaft ‚width‘ existiert nicht auf Typ ‚Htmlelement‘

Question

Die folgende Typoskript nicht kompilieren:

let svg = document.createElement("svg"); 
svg.width = 300; 

Aufgrund der Fehler Property 'width' does not exist on type 'HTMLElement'. Aber wenn ich zum Beispiel svg zu canvas ändere, dann kompiliert es, also ist es etwas über SVGs speziell scheint es ...

Irgendwelche Ideen?

Answer 1

Ihre Frage Titel ist Frage "Property 'width' existiert nicht auf Typ 'Htmlelement'"

HTMLElement hat keine Eigenschaft width es Eigentum style hat. und style hatten width

let svg = document.createElement("svg"); 
svg.style.width = '30px'; 

In Ihrem Fall benötigen Sie eine SVGSVGElement

var svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg") 
svgEl.width = 300 

Answer 2

In SVG Breite und Höhe der Elemente sind Attribute und nicht die CSS-Eigenschaften, so müssen Sie schreiben

document.getElementById('cercle1').setAttribute("height", "10px"); 

ähnlich für die Breite.

Change height/width of object SVG javascript

In Ihrem Fall:

svg.setAttribute("width", "300px"); 

Answer 3

let svg = document.createElement("svg"); nicht svg Element erstellen, sondern benutzerdefinierte HTML-Element.

Proper Weise svg Element zu erzeugen:

let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 

const customSvg = document.createElement("svg") 
 
const properSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg") 
 

 
console.log(customSvg instanceof SVGSVGElement) // false 
 
console.log(properSvg instanceof SVGSVGElement) // true 
 

 
console.log(customSvg.width) // undefined 
 
console.log(properSvg.width) // SVGAnimatedLength {}

Answer 4

As Marzelin explained, die richtige Art und Weise ein svg Element zu schaffen, ist durch document.createElementNS anstelle:

document.createElementNS("http://www.w3.org/2000/svg", "svg"); 

• Verwandte Frage: Create SVG tag with JavaScript

Typoskript Standard lib weiß das auch, also warum Sie bekommen eine HTMLElement Rückgabetyp Folgerung aus document.createElement("svg") statt SVGSVGElement.