Geek Answers Handbook

Genesis SVG conversion doesn't work in Chrome

I have an SVG-based application that makes heavy use of transforms such as translation, rotation, and scaling. Although I have no problem in Firefox, the property is transform-originnot taken into account in Chrome . It seems that the default value for user-agent is being used 0px 0px 0.

Here is an example ( JSFiddle ):

<svg width="400" height="400">
  <defs>
    <rect id="shape" width="200" height="200"/>
  </defs>
  <g transform="translate(100,100)">
    <use xlink:href="#shape" style="stroke: lightgray; fill: transparent;"/>
    <ellipse cx="100" cy="100" rx="3" ry="3" style="fill: black;"/>
    <g transform="translate(0,0) scale(0.5) rotate(45)" style="transform-origin: 100px 100px;">
      <use xlink:href="#shape" style="stroke: black; fill: transparent;"/>
    </g>
  </g>
</svg>

transform-origin issue

As you can see, Chrome applies all the transformations in the upper left corner of the form regardless of the specific source, while Firefox respects a specific origin.

Am I missing something about how it transform-originworks with SVG?

Has anyone really found a way to fix this without translation compensation?

+4
2

, , transform-origin SVG 1.1 Chrome 48.

, transform-origin CSS 3, SVG 1.1. , transform , transform-origin, . transform CSS 3, SVG 1.1, . transform-origin CSS 3, SVG 1.1. , transform-origin SVG Chrome 48.

, transform-origin SVG Firefox 44? , , , , Mozilla, SVG 2 Firefox. , SVG 2, CSS 3 ( ), SVG transform-origin. , , rotate(), x y. . , , scale() ​​, . , .

, Chrome 48 Firefox 44:

<svg width="400" height="400">
  <defs>
    <rect id="shape" width="200" height="200"/>
  </defs>
  <g transform="translate(100,100)">
    <use xlink:href="#shape" style="stroke: lightgray; fill: transparent;"/>
    <ellipse cx="100" cy="100" rx="3" ry="3" style="fill: black;"/>
    <g transform="translate(50,50) scale(0.5) rotate(45, 100, 100)">
      <use xlink:href="#shape" style="stroke: black; fill: transparent;"/>
    </g>
  </g>
</svg>
+6

CSS- SVG. CSS SVG , . , CSS 2D 3D, SVG- - 2D. CSS- , (, , , , ), SVG- ( ) (x, y), .

FireFox Chrome, CSS SVG-. ...

<svg width="400" height="400">
  <defs>
    <rect id="shape" width="200" height="200"/>
  </defs>
  <g transform="translate(100,100)">
    <use xlink:href="#shape" style="stroke: lightgray; fill: transparent;"/>
    <ellipse cx="100" cy="100" rx="3" ry="3" style="fill: black;"/>
    <g style="transform: translate(0,0) scale(0.5) rotate(45deg); transform-origin: 100px 100px;">
      <use xlink:href="#shape" style="stroke: black; fill: transparent;"/>
    </g>
  </g>
</svg>

FireFox, Chrome IE, SVG CSS. ...

<svg width="400" height="400">
  <defs>
    <rect id="shape" width="200" height="200"/>
  </defs>
  <g transform="translate(100,100)">
    <use xlink:href="#shape" style="stroke: lightgray; fill: transparent;"/>
    <ellipse cx="100" cy="100" rx="3" ry="3" style="fill: black;"/>
    <g transform="translate(0,0) scale(0.5) rotate(45,200,200)">
      <use xlink:href="#shape" style="stroke: black; fill: transparent;"/>
    </g>
  </g>
</svg>
+1

More articles:


All Articles