transform-origin

SVG 元素
1. A
2. B-C
3. D
  1. <defs>
  2. <desc>
4. E
  1. <ellipse>
5. F
6. G
7. H
  1. <hkern>
8. I
  1. <image>
9. J-L
  1. <line>
  2. <linearGradient>
10. M
11. N-P
12. Q-R
  1. <radialGradient>
  2. <rect>
13. S
  1. <script>
  2. <set>
  3. <stop>
  4. <style>
  5. <svg>
  6. <switch>
  7. <symbol>
14. T
15. U
  1. <use>
16. V-Z
  1. <view>
  2. <vkern>

transform-origin SVG attribute sets the origin for an item’s transformations.

You can use this attribute with any SVG element.

注意： As a presentation attribute in SVG, transform-origin corresponds in syntax and behavior to the transform-origin property in CSS, and can be used as CSS property to style SVG. See the CSS transform-origin property for more information.

用法注意事项

值

[ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?where 
<length-percentage> = <length> | <percentage>

默认值 0, 0

Animatable Yes

注意： 默认值 transform-origin is 0 0 for all SVG elements except for root <svg> elements and <svg> elements that are a direct child of a foreignObject , and whose transform-origin is 50% 50% , like other CSS elements.

transform-origin property may be specified using one, two, or three values, where each value represents an offset. Offsets that are not explicitly defined are reset to their corresponding initial values .

If a single <length> or <percentage> value is defined, it represents the horizontal offset.

If two or more values are defined and either no value is a keyword, or the only used keyword is center , then the first value represents the horizontal offset and the second represents the vertical offset.

One-value syntax:
- The value must be a <length> , or one of the keywords left , center , right , top ，和 bottom .
Two-value syntax:
- One value must be a <length> ， <percentage> , or one of the keywords left , center ，和 right .
- The other value must be a <length> ， <percentage> , or one of the keywords top , center ，和 bottom .
Three-value syntax:
- The first two values are the same as for the two-value syntax.
- The third value must be a <length> . It always represents the Z offset.

范例

This example shows the code for one PNG image and three SVG images:

A PNG reference image.
An SVG reference image that uses no transformation.
An SVG image that uses transform-origin to do a transformation, with the expected result being an image identical to the reference image.
An SVG image that does not use transform-origin but does the same transformation using just transform , with the expected result being an image identical to the reference image.

The fourth image image shows how to do the transformation in browsers that don't support transform-origin — because the code for the fourth image does the same transformation as the third image's transform-origin -based code, but by only using transform , without transform-origin .

注意： These examples use a modified version of a code snippet in a Stack Overflow question from Maxim Kulikov , as well as a modified version of a code snippet in an answer from Michael Mullany that accompanies the question. Both code snippets are used under the terms of the CC BY-SA license.)

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

    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 Level 1 The definition of 'transform-origin' in that specification.	工作草案
Scalable Vector Graphics (SVG) 2 The definition of 'transform-origin' in that specification.	候选推荐

浏览器兼容性

BCD tables only load in the browser

Found a problem with this page?

Edit on GitHub
Source on GitHub
Report a problem with this content on GitHub
Want to fix the problem yourself? See our Contribution guide .

最后修改： Jan 21, 2022 , 由 MDN 贡献者