x

Атрибут x задаёт координату по оси x в пользовательской системе координат.

Элементы

Этот атрибут можно использовать с элементами SVG, описанными в разделах ниже.

<feBlend>

Для <feBlend> атрибут x задаёт минимальную координату x области отрисовки примитива.

<feColorMatrix>

Для <feColorMatrix> атрибут x задаёт минимальную координату x области отрисовки примитива.

<feComponentTransfer>

Для <feComponentTransfer> атрибут x задаёт минимальную координату x области отрисовки примитива.

<feComposite>

Для <feComposite> атрибут x задаёт минимальную координату x области отрисовки примитива.

<feConvolveMatrix>

Для <feConvolveMatrix> атрибут x задаёт минимальную координату x области отрисовки примитива.

<feDiffuseLighting>

Для <feDiffuseLighting> атрибут x задаёт минимальную координату x области отрисовки примитива.

<feDisplacementMap>

Для <feDisplacementMap> атрибут x задаёт минимальную координату x области отрисовки примитива.

<feDropShadow>

Для <feDropShadow> атрибут x задаёт минимальную координату x области отрисовки примитива.

<feFlood>

Для <feFlood> атрибут x задаёт минимальную координату x области отрисовки примитива.

<feFuncA>

Для <feFuncA> атрибут x задаёт минимальную координату x области отрисовки примитива.

<feFuncB>

Для <feFuncB> атрибут x задаёт минимальную координату x области отрисовки примитива.

<feFuncG>

Для <feFuncG> атрибут x задаёт минимальную координату x области отрисовки примитива.

<feFuncR>

Для <feFuncR> атрибут x задаёт минимальную координату x области отрисовки примитива.

<feGaussianBlur>

Для <feGaussianBlur> атрибут x задаёт минимальную координату x области отрисовки примитива.

<feImage>

Для <feImage> атрибут x задаёт минимальную координату x области отрисовки примитива.

<feMerge>

Для <feMerge> атрибут x задаёт минимальную координату x области отрисовки примитива.

<feMergeNode>

Для <feMergeNode> атрибут x задаёт минимальную координату x области отрисовки примитива.

<feMorphology>

Для <feMorphology> атрибут x задаёт минимальную координату x области отрисовки примитива.

<feOffset>

Для <feOffset> атрибут x задаёт минимальную координату x области отрисовки примитива.

<fePointLight>

Для <fePointLight> атрибут x задаёт положение источника света по оси x в системе координат, определяемой атрибутом primitiveUnits элемента <filter>.

<feSpecularLighting>

Для <feSpecularLighting> атрибут x задаёт минимальную координату x области отрисовки примитива.

<feSpotLight>

Для <feSpotLight> атрибут x задаёт положение источника света по оси x в системе координат, определяемой атрибутом primitiveUnits элемента <filter>.

<feTile>

Для <feTile> атрибут x задаёт минимальную координату x области отрисовки примитива.

<feTurbulence>

Для <feTurbulence> атрибут x задаёт минимальную координату x области отрисовки примитива.

<filter>

Для <filter> атрибут x задаёт координату x верхнего левого угла области отрисовки фильтра.

<foreignObject>

Для <foreignObject> атрибут x задаёт координату x верхнего левого угла области просмотра элемента.

<image>

Для <image> атрибут x задаёт координату x верхнего левого угла изображения.

<mask>

Для <mask> атрибут x задаёт координату x верхнего левого угла области его действия. Точное действие этого атрибута зависит от атрибута maskUnits.

<pattern>

Для <pattern> атрибут x задаёт координату x верхнего левого угла узора плитки. Точное действие этого атрибута зависит от атрибутов patternUnits и patternTransform.

<rect>

Для <rect> атрибут x задаёт координату x верхнего левого угла фигуры.

<svg>

Для <svg> атрибут x задаёт координату x верхнего левого угла области просмотра элемента.

<text>

Для <text> если атрибут содержит одно значение, x задаёт координату x, в которой должна располагаться позиция текстового содержимого. Позиция текстового содержимого обычно представляет собой точку на базовой линии первой строки текста. На точное положение позиции текстового содержимого влияют другие свойства, например text-anchor или direction.

Если атрибут содержит несколько значений, x задаёт координату x каждой отдельной глифы текста. Если значений меньше, чем глифов, оставшиеся глифы располагаются на одной линии с последней позиционированной глифой. Если значений больше, чем глифов, лишние значения игнорируются.

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- horizontal line to materialized the text base line -->
  <line x1="0" y1="40%" x2="100%" y2="40%" />
  <line x1="0" y1="90%" x2="100%" y2="90%" />

  <!-- vertical line to materialized the x positioning -->
  <line x1="25%" y1="0" x2="25%" y2="100%" />
  <line x1="50%" y1="0" x2="50%" y2="100%" />
  <line x1="75%" y1="0" x2="75%" y2="100%" />

  <!-- x with a single value -->
  <text y="40%" x="50%">SVG</text>

  <!-- x with multiple values -->
  <text y="90%" x="25%, 50%, 75%">SVG</text>
</svg>

text {
  font: 40px sans-serif;
}

line {
  fill: none;
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 2px;
}

<tspan>

Для <tspan> если атрибут содержит одно значение, x задаёт координату x, в которой должна располагаться позиция текстового содержимого. Позиция текстового содержимого обычно представляет собой точку на базовой линии первой строки текста. На точное положение позиции текстового содержимого влияют другие свойства, например text-anchor или direction.

Если атрибут содержит несколько значений, x задаёт координату x каждой отдельной глифы текста. Если значений меньше, чем глифов, оставшиеся глифы располагаются на одной линии с последней позиционированной глифой. Если значений больше, чем глифов, лишние значения игнорируются.

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- horizontal line to materialized the text base line -->
  <line x1="0" y1="40%" x2="100%" y2="40%" />
  <line x1="0" y1="90%" x2="100%" y2="90%" />

  <!-- vertical line to materialized the x positioning -->
  <line x1="25%" y1="0" x2="25%" y2="100%" />
  <line x1="50%" y1="0" x2="50%" y2="100%" />
  <line x1="75%" y1="0" x2="75%" y2="100%" />

  <text>
    <!-- x with a single value -->
    <tspan y="40%" x="50%">SVG</tspan>

    <!-- x with multiple values -->
    <tspan y="90%" x="25%, 50%, 75%">SVG</tspan>
  </text>
</svg>

text {
  font: 40px sans-serif;
}

line {
  fill: none;
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 2px;
}

<use>

Для <use> атрибут x задаёт координату x верхнего левого угла ссылочного элемента.

Примеры

В этом примере представлены три элемента <rect>, каждый из которых имеет значение x меньшее, чем у предыдущего.

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="220" y="20" width="60" height="60" fill="red" />
  <rect x="120" y="20" width="60" height="60" fill="yellow" />
  <rect x="20" y="20" width="60" height="60" fill="blue" />
</svg>

Спецификации

См. также

• Свойство CSS x