TransformationBug

plainSvg.svg

TransformationBug.tsx

import React from 'react';
import { Document, Page, Text, View, StyleSheet, Svg, G, Rect } from '@react-pdf/renderer';

const TestChart = (
  <Svg 
    style={{ fontFamily: "Helvetica", fontSize: "12px" }}
    width="600"
    height="600"
    viewBox="0 0 600 600"
  >
    <G 
      data-z-index="0.1"
      opacity="1"
      transform="translate(590,509) rotate(90) scale(-1,1) scale(1 1)"
    >
      <Rect 
        x="344.5"
        y="291.5"
        width="50"
        height="204"
        fill="#A9DACC"
        stroke="#ffffff"
        strokeWidth="1"
        opacity="1"
      />
      <Rect 
        x="120.5"
        y="51.5"
        width="50"
        height="444"
        fill="#A9DACC"
        stroke="#ffffff"
        strokeWidth="1"
        opacity="1"
      />
    </G>
  </Svg>
)

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  column: {
    flexDirection: 'column',
    width: `${DEFAULT_COL_WIDTH}%`
  },
  body: {
    paddingTop: 35,
    paddingBottom: 65,
    paddingHorizontal: 35,
    fontFamily: 'Open Sans'
  },
})

function Report() {
  
  return (
    <Document title='Test_Report'>
      <Page size="A4" style={styles.body}>
        <View style={styles.row}>
          <View style={styles.column}>
            {TestChart}
          </View>
        </View>
      </Page>
    </Document>
  )
}