Svg translate transform: Трансформации для SVG-элементов — CSS-LIVE

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

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

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

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

Usage notes

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

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

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

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

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

Example

В этом примере показан код для одного изображения PNG и трех изображений SVG:

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

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

Примечание. В этих примерах используется модифицированная версия фрагмента кода из вопроса Stack Overflow от Максима Куликова , а также модифицированная версия фрагмента кода из ответа Майкла Маллани , сопровождающего вопрос. Оба фрагмента кода используются в соответствии с условиями лицензии CC BY-SA .)

HTML

<h5>Reference image</h5>
<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" 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>
<h5>Transformation with transform-origin</h5>
<div>
  <figure>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
      <defs>
        <g>
          <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" 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>
<h5>Transformation without transform-origin</h5>
<div>
  <figure>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
      <defs>
        <g>
          <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" 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

    h5 {
      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;
    }

Result

Specifications

Specification
CSS Transforms Module Level 1 # transform-origin-property
Масштабируемая векторная графика (SVG) 1. 1 (второе издание) # PresentationAttributes

Browser compatibility

• 1
• …
• 212
• 213
• 214
• 215
• 216
• …
• 367
• Next

type

Атрибут преобразования SVG — GeeksforGeeks

Улучшить статью

Сохранить статью

• Последнее обновление: 31 мар, 2022

Улучшить статью

Сохранить статью

Атрибут преобразования указывает список определений преобразования, которые применяются к элементу и его дочерним элементам. В SVG 1.1 только этим элементам разрешено использовать атрибут преобразования , , , , , , , , , , , , , , и .

Синтаксис:

 transform = scale() | перевести() | повернуть () |
                 матрица() | косойX() | skewY() 

Значения атрибута: Атрибут преобразования принимает функцию преобразования, упомянутую выше и описанную ниже.

• skewX(): Перечисляет наклонное преобразование по оси x в градусах.
• skewY(): Перечисляет наклонное преобразование по оси Y на градус.
• scale(): Перечисляет операцию масштабирования по x и y. Предполагается, что он равен x, если y не указан.
• rotate(): Перечисляет поворот на градус вокруг заданной точки.
• translate(): Перемещает объект по x и y. Предполагается, что он равен 0, если y не указан.
• matrix(): Он перечисляет преобразование в виде матрицы преобразования из шести значений.

Пример 1: Ниже приведен пример, иллюстрирующий использование атрибута преобразования с использованием функций преобразования rotate(), translate(), skewX() и scale().

HTML

< html >     < body >      < h2 стиль = "цвет: зеленый; размер шрифта: 50 пикселей;" >          GeeksforGeeks      h2 >          < svg viewBox = "-25 0 450 400"            xmlns = "http://www. w3.org/2000/svg" XMLNS: Xlink = " = "серый" Transform = "rotate (-10 50 100) Перевод (-36 45,5) SKEWX (40) (40) (40)0080                          scale(1 0.5)">              < path id = "heart" d="M 10, 30 A 20, 20  0, 0, 1 50, 30 A 20, 20 0, 0, 1 90, 30 Q 90, 60 50, 60, 60, 60. 0 Q 10, 60 10,                               30 z" />          g >                      < use xlink: Href = "#heart" F ILL = "Нет" Инсульта = 900 Инсульта = 90 900 "0079 "green" />      svg >     body >     html >

Вывод:

Пример 2: Ниже приведен пример, иллюстрирующий использование преобразования Атрибут 0022 с использованием функции преобразования шкалы .

HTML

Вывод:

 html,body,svg { height:100% } 

 HTML, тело, SVG {высота: 100%}
 

  w3.org/2000/svg">
  
  
  
 

  х   новый  =  х   старый  +   
      г   новый  =  г   старый  +  <у> 
 

 HTML, тело, SVG {высота: 100%}
 

 HTML, тело, SVG {высота: 100%}
 

 HTML, тело, SVG {высота: 100%}
 

 HTML, тело, SVG {высота: 100%}