x CSS属性详解

x是CSS中的一个属性，用于定义SVG元素左上角的x轴坐标。这个属性适用于矩形(<rect>)、图像(<image>)、外部对象(<foreignObject>)以及嵌套的SVG视口(<svg>)。这些坐标是相对于最近的<svg>祖先元素的坐标系而言的。如果同时存在x属性和CSS的x属性，后者会覆盖前者。

需要注意的是，x属性只适用于嵌套在<svg>元素内部的特定SVG元素，包括矩形、图像、外部对象和嵌套的SVG元素。它对外层的<svg>元素本身没有效果，也不适用于其他SVG元素、HTML元素或伪元素。

这个功能已经得到广泛支持，在2020年7月就已经在各大浏览器中实现。Chrome、Edge、Firefox和Safari等主流浏览器都支持这一特性，使其成为开发SVG图形时的可靠选择。