The transformation does not occur again when the window is resized

Question

The transformation does not occur again when the window is resized

After seeing a question on How to make svg RTL
I attempted to make my svg RTL using:

transform: translate(100%, 0) scale(-1, 1);

However, I noticed that when resizing my browser window, the transform is not properly applied and the line origin shifts!
Here is an example showcasing this issue
To reproduce:
1- Change the window size (perhaps make it larger), observe how the line origin deviates from 0 0
2- Use inspect element on the line, uncheck and then check the "transform" in the CSS class, the element returns to its correct position

It is clear that the transform is not being applied correctly upon resizing.

css reactjs svg

Answer 1

Answer №1

One effective technique to specify the position and size of an SVG viewport is by using the viewBox attribute:

function App() {
  return (
    <div className="App">
      <div>
        To observe the effect, adjust the browser window size and witness how the line's position deviates from 0, 0.
      </div>
      <svg viewBox="0 0 200 200" vector-effect="non-scaling-stroke">
        <g className="svgRTL">
          <path
            stroke="green"
            strokeWidth="3"
            fill="none"
            d="M 0 0 L 100 100"
          />
        </g>
      </svg>
    </div>
  );
}

https://codesandbox.io/s/svg-origin-change-testcase-zkyfe?fontsize=14

Answer 2

One effective technique to specify the position and size of an SVG viewport is by using the viewBox attribute:

function App() {
  return (
    <div className="App">
      <div>
        To observe the effect, adjust the browser window size and witness how the line's position deviates from 0, 0.
      </div>
      <svg viewBox="0 0 200 200" vector-effect="non-scaling-stroke">
        <g className="svgRTL">
          <path
            stroke="green"
            strokeWidth="3"
            fill="none"
            d="M 0 0 L 100 100"
          />
        </g>
      </svg>
    </div>
  );
}

https://codesandbox.io/s/svg-origin-change-testcase-zkyfe?fontsize=14

The transformation does not occur again when the window is resized

Answer №1

Similar questions

Utilize Vue.js to sort by price bracket and category

Stylish CSS popup backdrop

Should I create CSS rules for different screen sizes or should I dynamically render components based on the screen size?

"Enhance your website's loading speed with the Google Page Speed Up

What is causing the network tab requests not to appear in the browser when I am utilizing NextJS SSR?

What methods can be used to keep divs from breaking onto separate lines?

The `Home` object does not have the property `age` in React/TypeScript

What is the best way to create transitions for item entry and exit in ReactJS without relying on external libraries?

The scrolling element mirrors the movement of the scrolling window

The module 'react/jsx-runtime' could not be located within the directory '/client/node_modules/@mui/icons-material' during the Docker setup process

The geocoder-autocomplete feature in ReactJS is now experiencing a sudden Network Error in Firefox

Tips for showing more rows by clicking an icon within an Angular 2 table

The Process of Developing Applications

Looking for assistance in setting up a straightforward TypeScript Preact application

Card columns with dropdown extending into adjacent column

Issue with Hover Effect for Input Type in Submit Form in HTML and CSS

The put method is not recognizing the Axios callback function

Is it possible to access an external website by clicking on a link within a DIV element?

Filtering FieldSelector options in react-querybuilder: A step-by-step guide

What is the best way to align this button next to the text and header on the page?