为什么在设置SVG样式时“x”作为CSS属性工作?

div {
 border: dashed 1px grey; 
 padding: 0.5em; 
}

rect.controlled-by-css {
 stroke: red; 
 stroke-width: 2px; 
 x: 5; 
 y: 20; 
 height: 10px; 
 width: 10px; 
}

line.controlled-by-css {
 
 x1: 25; 
 y1: 25; 
 x2: 40; 
 y2: 40; 
 
 stroke: red; 
 stroke-width: 2px; 
}

<div> 

<svg> 
   <rect stroke ="black" x ="0" y ="0" height ="10" width ="10"/> 
   
   <line stroke ="black" x1 ="15" y1 =" 15" x2 ="25" y2 ="0"/> 
   
   <rect class ="controlled-by-css"/> 
   
   <!-- this line won't show up - x1, x2, y1, y2 are invalid property names --> 
   <line class ="controlled-by-css"/> 
</svg> 
</div>