Reverse the orientation of the SVG image, for instance, the graph

I've been experimenting with creating a bar graph using SVG, but I'm struggling to understand how it works. I tried rotating an existing graph upside down, but there seems to be a small offset. You can view the corresponding jsfiddle here - http://jsfiddle.net/rhvP8/2/ 

  <div style="width:300px;height:300px;">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:100%;height:100%" viewBox="0 0 300 300">
    <g>
        <rect  width="14.55" height="40%" x="0" y="0" fill="black"></rect>
        <rect  width="14.55" height="20%" x="50" y="0" fill="green"></rect>
        <rect  width="14.55" height="80%" x="100" y="0" fill="red"></rect>
        <rect  width="14.55" height="90%" x="150" y="0" fill="yellow"></rect>
        <rect  width="14.55" height="10%" x="200" y="0" fill="pink"></rect>
        <rect  width="14.55" height="60%" x="250" y="0" fill="orange"></rect>
    </g>
</svg> 
</div>
<div style="width:300px;height:300px;">
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:100%;height:100%" viewBox="0 0 300 300">
    <g transform="rotate(180)">
        <rect  width="14.55" height="40" x="-50" y="-300" fill="black"></rect>
        <rect  width="14.55" height="20" x="-100" y="-300" fill="green"></rect>
        <rect  width="14.55" height="35" x="-150" y="-300" fill="red"></rect>
        <rect  width="14.55" height="90" x="-200" y="-300" fill="yellow"></rect>
        <rect  width="14.55" height="10" x="-250" y="-300" fill="pink"></rect>
        <rect  width="14.55" height="60" x="-300" y="-300" fill="orange"></rect>
    </g>
    </svg> 
</div>
csshtmlsvg

Answer №1

It's important to keep in mind that when using the rotate() transform, the object will rotate around the coordinates (0,0) - which is the top left corner of the graph in this scenario. The graph being 300px wide and 300px tall means that a 180° rotation will cause the graph to move beyond the top left corner. To correct this, you can utilize a translate transform to adjust the coordinates and bring the drawing back into view. Check out this illustration for better clarification:

Take a look at this updated JSfiddle link with some additional fixes: http://jsfiddle.net/rhvP8/4/

Answer №2

Instead of following squeamish's approach, an alternative solution is to utilize the rotate function that includes the rotation origin: rotate(angle x y).

Given that you are working with a graph size of 300x300, using rotate(180 150 150) will suffice.

Check out the demonstration here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

If the SASS condition matches the variable for the background color, then

I attempted to create a conditional statement in my component using Sass @if and @else. The condition I set was that if background == var(--bg-danger), the color should be white. However, it only returned white and did not trigger the else condition. @mixi ...

cssvue.jssass

elements that do not adhere to set width constraints

I've successfully arranged elements in my HTML using flexbox to achieve a responsive design for a website. However, I've encountered an issue where the elements do not resize properly. After applying a class of flex to the home-promos div and re ...

htmlcssflexbox

Utilizing dynamic attributes in design with bootstrap and CSS. Our capabilities are limited in executing actions through selenium

https://i.stack.imgur.com/Bwbgh.jpg Upon reviewing the code snippet above, I have made an attempt to locate elements and execute actions in Selenium. Actions action = new Actions(driver); Initiating Control on Elements WebElement we = driver. ...

cssselenium

The show-word-limit feature is malfunctioning on the element.eleme.io platform

After attempting to utilize the show-word-limit attribute of the input element, unfortunately the character count did not display. Below is the code snippet that was used: <el-input type="textarea" placeholder="Please input" ...

javascripthtmlvue.jsinputelement

Creating sequential numbers using jQuery

Recently, I worked on a script (credit to Chyno Deluxe) that generates a list of menu items based on what is written in the input box. However, I now have a new requirement which involves generating a sequence of numbers to be added continuously. Here is ...

javascriptjqueryhtmlcss

The Challenges of Parsing HTML Source Code for Web Scraping

I've been attempting to scrape data from this website: (specifically rare earth material prices) using Python and BeautifulSoup. My query pertains not to Python, but rather the HTML source code of the site. When I utilize Firefox's "Inspect Elem ...

htmlcss

Duplicating a concealed div and transferring it to a new div

I'm encountering an issue while trying to copy one div to another. The div I'm attempting to copy has a hidden parent div. The problem is that the destination div does not appear after copying, even though I changed its style display to block. ...

javascriptjqueryhtmlcsscopy

Having trouble with the Tailwind transition in my Next.js component

I'm facing an issue with the ease out transition not working as expected. I need the side to slide in from left to right with a duration of 500ms. Despite trying various solutions, I can't seem to figure out why it's not functioning properly ...

cssnext.jstailwind-csstailwind-ui

Office Outlook Client experiencing incorrect div width

I'm having trouble sending an email with HTML content because it's not displaying correctly in Microsoft Office Outlook when it comes to width. Any suggestions on how to fix this issue? <div style="width: 650px; border: 1px solid blue">hel ...

htmlcssemailoutlook

Interactive menu backdrop determined by div element

I am working on a website with a menu structured like the following: Home -- Work -- Pricing -- Contact Us -- About This website uses a one-page layout and has enabled Scrollspy on Bootstrap. I need to make the active menu background dynamic depending o ...

csstwitter-bootstrap

The ng-repeat directive in my Angular app's div element is being displayed as a comment

After spending several days searching, I have yet to find a solution for my issue. It seems to be specific to the code I'm working with in Angular 1.6. I apologize for the format of my post, as this is my first time seeking help on stack overflow ...

htmlangularjsangularjs-ng-repeat

Tips for focusing on a background image without being distracted by its child elements

I am trying to create a zoom effect on the background-image with an animation but I am encountering issues where all child elements are also animated and zoomed. When hovering over the element, I want only the background part to be animated and zoomed, and ...

htmlcsstwitter-bootstrapcss-selectors

Is it possible to utilize the output of a function to determine the styling of a div element in Vue?

Hi, I'm trying to use the v-bind:style in my div to apply the textposit function with the textpos prop as a parameter. The function should adjust the style of the div based on the value of the parameter. <div class="container" :style=&qu ...

javascriptcssvue.jsvuex

Aligning elements vertically within a parent container

I am facing a problem where elements are not aligning vertically in the center of their parent div. CSS: /* Main body structure */ body{ font-size:0.5em; } .main-wrapper { width: 90%; margin: auto; background-color: #efefef; } * { ...

csshtmlvertical-alignment

Disable automatic playback of HTML video

There is an HTML video with an image that loads initially and then disappears to play the video. I would like the image to always be visible until I click on it. Once clicked, the video should start playing. You can view the code on JSFiddle: http://jsf ...

javascriptjqueryhtmlcss

Using React to open a (.json) file through a dialog box and access the contents

I'm struggling to understand how to load a local .json file and access its contents in order to store it in a 'state' variable. Here's the code I have so far: import React, { Component } from 'react' import Files from ' ...

htmlreactjsecmascript-6

Displaying a visual representation of time remaining with a countdown progress bar

While browsing online, I stumbled upon a creative progress bar code featured on this particular website. My goal is to implement a countdown timer that displays the remaining minutes and seconds rather than a percentage. In order to achieve this, I have i ...

jquerycss

Simple HTML files on a local server are having trouble loading images and JavaScript, yet the CSS is loading

Having worked in web design for quite some time, I recently began working on a basic Angular app that is meant to be very simple. For this project, I am only using the angular files and a single html file as the foundation. As I started setting up the bas ...

javascripthtmlcssangularjscss-selectors

What is the method for choosing an Object that includes an Array within its constructor?

Is there a way to retrieve a specific argument in an Object constructor that is an Array and select an index within the array for a calculation (totaling all items for that customer). I have been attempting to access the price value in the Items Object an ...

javascripthtml

Discovering the correct element and typing for an HTML attribute through JavaScript

We are currently working on test automation and I am looking for a way to identify the Element and Type associated with it within an html (Data-qa) attribute. For example, when looping through, the Element is identified as input and the type is radio. < ...

javascripthtmlselenium