transform-origin

Атрибут transform-origin SVG задаёт начало отсчёта для преобразований элемента.

Вы можете использовать этот атрибут с любым элементом SVG.

Примечание: В качестве атрибута презентации в SVG, transform-origin соответствует по синтаксису и поведению свойству transform-origin в CSS и может использоваться как свойство CSS для стилизации SVG. Для получения дополнительной информации см. свойство CSS transform-origin.

Примечания по использованию

Значения	См. `transform-origin`
Значение по умолчанию	`0, 0`
Анимируемо	Да

Примечание: Значение по умолчанию для transform-origin равно 0 0 для всех элементов SVG, кроме корневых элементов <svg> и элементов <svg>, являющихся прямыми потомками foreignObject, и у которых transform-origin имеет значение 50% 50%, как и у других элементов CSS.

Свойство transform-origin может быть задано с помощью одного, двух или трёх значений, где каждое значение представляет смещение.

Смещения, которые не определены явно, сбрасываются до соответствующих начальных значений.

Если определено одно значение, это значение — <length> или <percentage> — представляет горизонтальное смещение.

Если определено два или более значений, и ни одно значение не является ключевым словом, или единственным использованным ключевым словом является center, то первое значение представляет горизонтальное смещение, а второе — вертикальное.

Синтаксис с одним значением:
- Значение должно быть <length> или одним из ключевых слов left, center, right, top, и bottom.
Синтаксис с двумя значениями:
- Одно значение должно быть <length>, <percentage> или одним из ключевых слов left, center, и right.
- Другое значение должно быть <length>, <percentage> или одним из ключевых слов top, center, и bottom.
Синтаксис с тремя значениями:
- Первые два значения аналогичны синтаксису с двумя значениями.
- Третье значение должно быть <length>. Оно всегда представляет смещение по оси Z.

Пример

Этот пример демонстрирует код для одного изображения PNG и трёх изображений SVG:

Изображение PNG в качестве эталона.
Изображение SVG в качестве эталона, не использующее преобразования.
Изображение SVG, использующее transform-origin для преобразования, с ожидаемым результатом — изображение, идентичное изображению-эталону.
Изображение SVG, не использующее transform-origin, но выполняющее то же самое преобразование с помощью только transform, с ожидаемым результатом — изображение, идентичное изображению-эталону.

Четвёртое изображение показывает, как выполнить преобразование в браузерах, которые не поддерживают transform-origin — так как код четвёртого изображения выполняет такое же преобразование, как код третьего изображения, использующий transform-origin-основанный код, но только с помощью transform, без transform-origin.

Примечание: Эти примеры используют модифицированную версию фрагмента кода из вопроса на Stack Overflow вопрос от Maxim Kulikov, а также модифицированную версию фрагмента кода из ответа от Michael Mullany, которые сопровождают вопрос. Оба фрагмента кода используются на условиях лицензии CC BY-SA.

HTML

html

<h4>Reference image</h4>

<div>
  <figure>
    <img src="reference.png" alt="PNG reference image" />
    <figcaption>
      Figure 1. PNG reference image. The images following this should look
      exactly the same as this.
    </figcaption>
  </figure>
</div>

<div>
  <figure>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="200"
      height="200"
      viewBox="0 0 200 200">
      <circle cx="100" cy="100" r="100" stroke="none" fill="black" />
      <line
        x1="100"
        y1="0"
        x2="100"
        y2="200"
        stroke="rebeccapurple"
        stroke-width="2" />
      <line
        x1="0"
        y1="100"
        x2="200"
        y2="100"
        stroke="rebeccapurple"
        stroke-width="2" />

      <circle cx="100" cy="100" r="75" stroke="none" fill="blue" />
      <line
        x1="100"
        y1="25"
        x2="100"
        y2="175"
        stroke="rebeccapurple"
        stroke-width="1.5" />
      <line
        x1="25"
        y1="100"
        x2="175"
        y2="100"
        stroke="rebeccapurple"
        stroke-width="1.5" />

      <circle cx="100" cy="100" r="50" stroke="none" fill="red" />
      <line
        x1="100"
        y1="50"
        x2="100"
        y2="150"
        stroke="rebeccapurple"
        stroke-width="1" />
      <line
        x1="50"
        y1="100"
        x2="150"
        y2="100"
        stroke="rebeccapurple"
        stroke-width="1" />

      <circle cx="100" cy="100" r="25" stroke="none" fill="yellow" />
      <line
        x1="100"
        y1="75"
        x2="100"
        y2="125"
        stroke="rebeccapurple"
        stroke-width="0.5" />
      <line
        x1="75"
        y1="100"
        x2="125"
        y2="100"
        stroke="rebeccapurple"
        stroke-width="0.5" />
    </svg>
    <figcaption>
      Figure 2. SVG reference image. The images following this should look
      exactly the same as this.
    </figcaption>
  </figure>
</div>

<h4>Transformation with transform-origin</h4>

<div>
  <figure>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="200"
      height="200"
      viewBox="0 0 200 200">
      <defs>
        <g id="target-g-1">
          <circle cx="100" cy="100" r="100" stroke="none" />
          <line
            x1="100"
            y1="0"
            x2="100"
            y2="200"
            stroke="rebeccapurple"
            stroke-width="2" />
          <line
            x1="0"
            y1="100"
            x2="200"
            y2="100"
            stroke="rebeccapurple"
            stroke-width="2" />
        </g>
      </defs>

      <use href="#target-g-1" fill="black" />
      <use
        href="#target-g-1"
        fill="blue"
        transform="scale(0.75 0.75)"
        transform-origin="100 100" />

      <svg
        xmlns="http://www.w3.org/2000/svg"
        x="0"
        y="0"
        width="200"
        height="200"
        viewBox="0 0 200 200">
        <use
          href="#target-g-1"
          fill="red"
          transform="scale(0.5 0.5)"
          transform-origin="100 100" />
        <use
          href="#target-g-1"
          fill="yellow"
          transform="scale(0.25 0.25)"
          transform-origin="100 100" />
      </svg>
    </svg>

    <figcaption>
      Figure 3. transform-origin used. This image should look exactly the same
      as the reference image in Figure 2.
    </figcaption>
  </figure>
</div>

<h4>Transformation without transform-origin</h4>

<div>
  <figure>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="200"
      height="200"
      viewBox="0 0 200 200">
      <defs>
        <g id="target-g-1">
          <circle cx="100" cy="100" r="100" stroke="none" />
          <line
            x1="100"
            y1="0"
            x2="100"
            y2="200"
            stroke="rebeccapurple"
            stroke-width="2" />
          <line
            x1="0"
            y1="100"
            x2="200"
            y2="100"
            stroke="rebeccapurple"
            stroke-width="2" />
        </g>
      </defs>

      <use href="#target-g-1" fill="black" />
      <use
        href="#target-g-1"
        fill="blue"
        transform="translate(100 100) scale(0.75 0.75) translate(-100 -100)" />

      <svg
        xmlns="http://www.w3.org/2000/svg"
        x="0"
        y="0"
        width="200"
        height="200"
        viewBox="0 0 200 200">
        <use
          href="#target-g-1"
          fill="red"
          transform="translate(100 100) scale(0.5 0.5) translate(-100 -100)" />
        <use
          href="#target-g-1"
          fill="yellow"
          transform="translate(100 100) scale(0.25 0.25) translate(-100 -100)" />
      </svg>
    </svg>

    <figcaption>
      Figure 4. transform-origin not used. This image should look exactly the
      same as the reference image in Figure 2.
    </figcaption>
  </figure>
</div>

CSS

css

h4 {
  font-family: sans-serif;
}

figure {
  border: thin #c0c0c0 solid;
  display: inline-flex;
  flex-flow: column;
  padding: 5px;
  max-width: 200px;
  margin: auto;
}

figcaption {
  margin-top: 5px;
  background-color: #222;
  color: #fff;
  font: smaller sans-serif;
  padding: 3px;
  text-align: center;
}

Результат

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

Спецификация
CSS Transforms Module Level 1 # transform-origin-property
Scalable Vector Graphics (SVG) 2 # PresentationAttributes

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`transform-origin`	≤83	83	77	69	≤13.1 Не работает с атрибутом SVG презентации `transform`. Работает только со свойством CSS `transform`. См. баг 201854.	83	79	59	≤13.4 Не работает с атрибутом SVG презентации `transform`. Работает только со свойством CSS `transform`. См. баг 201854.	13.0	83

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform-origin