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

What is the best way to assign a Python variable to an <a-assets> element?

There exists a Python function that provides the chosen background <a-sky ID="sky" color="{{object.background}}"></a-sky> The backgrounds can be in the format of '#c6aa99', '#e1a600', '#290942', 'star' ...

pythonhtmlaframe

Using mousedown, mousemove, and mouseup to handle touch events in vanilla JavaScript instead of jQuery

Can someone guide me on how to set up a touch event handler in JavaScript using the mousedown, mousemove, and mouseup events? I would really appreciate any suggestions or tips! ...

javascripthtmlcss

Tips for using jQuery to create a delete functionality with a select element

I'm relatively new to utilizing jquery. I decided to tackle this project for enjoyment: http://jsbin.com/pevateli/2/ My goal is to allow users to input items, add them to a list, and then have the option to select and delete them by clicking on the t ...

javascriptjqueryhtmlcss

Even though my performance in a sandbox environment is excellent, I am unable to obtain a token in a production environment

After posting my question on the Evernote developer forum, I was disappointed to find that the forum had been closed before I received a response. Even after receiving a proposal from an Evernote employee named chanatx to verify if my key was activated co ...

javascripthtmloauthevernotemonaca

What is the easiest way to import a CSS file into just one specific page in Ionic2?

Take, for instance, my desire to import the following: <link rel="stylesheet" href="mycss.css"> into example_page. I attempted importing it from index.html, but I fear that by doing so, the CSS will be loaded on every page each time I run my app. I ...

cssionic-frameworkionic2

Is there a feature in JavaScript that allows for the creation of URLs?

I created an index view displaying cards (like playing cards) in a grid using BootStrap. Each card is within its own div element, and I implemented a jQuery click handler for each div to open a details page when clicked. The redirect from the index to the ...

javascriptjqueryhtml

Having issues with my CodePen React code and its ability to display my gradient background

I will provide detailed descriptions to help explain my issue. Link to CodePen: https://codepen.io/Yosharu/pen/morErw The problem I am facing is that my background (and some other CSS elements) are not loading properly in my code, resulting in a white bac ...

javascripthtmlcssreactjscodepen

HTML validation produces mistakes

I encountered an issue when using Google Fonts and received the following error related to a specific link: <link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:700|Mer ...

htmlcssfontsw3c-validation

Having trouble getting wire:click to work within an if statement in Laravel Livewire

I am currently in the process of creating a popover feature for my website that should open when I click on a phone number. Upon clicking on the phone number, it triggers a function called "startCall" in my Livewire component which sets the value of $calli ...

phphtmlcsslaravel-livewirelaravel-livewire-wireclick

AngularJS - ng-repeat not updating when property array changes

I have a loop in my HTML using ng-repeat: <div class="row"> <div ng-repeat="item in model.painel track by item.codigoIncidente"> <strong>{{item.restante.horaMinutoSegundo}}</strong> </div> </div> In ...

javascriptangularjshtml

How to retrieve a string from a regular expression in Javascript without [Object object] output

Within my code, there exists a parent form component and a child component used for auto-completing text input. The Parent component passes an array of objects named autoCompTxt, consisting of name and id fields, to the Child component. //Parent: const [ob ...

javascripthtmlreactjsreact-hooks

Manipulating elements with JavaScript to remove them, while ensuring that the empty space is automatically filled

Recently, I decided to enhance my understanding of JavaScript by experimenting with it on various websites. My goal was to use JavaScript to remove the right bar from a webpage and have the remaining body text automatically fill in the space left behind. ...

javascripthtmlcss

AngularJS: Showcase HTML code within ng-view along with its corresponding output displayed in a navigation format such as Html, Css, JS, and Result

Currently, I am working on a web application. One of the screens, screen-1, consists of a series of buttons labeled 'Code'. When a user clicks on any of these buttons, it loads a different HTML page, screen-2, in the ng-view using $location.path( ...

javascripthtmlcssangularjs

What is the best way to make Bootstrap 3 move to a new line when there is not enough space?

I am facing an issue with a lengthy text inside a div with a class of "col-md-3". The text is so long that it appears to be overlapping with the content of another div. Adding spaces is not an option as it is an email address, and it displays fine on some ...

htmlcsstwitter-bootstrap

The functionality of the button is affected when it is placed on the same line as a h1 heading

My goal is to have the page title and profile button aligned on the same line in the header of each page. However, I've encountered an issue where the button doesn't function properly when placed on the same line but works fine when separated ont ...

javascripthtmlcssreactjsweb-applications

When PHP displays values from the $_POST array, it appears as "1" instead of the actual element values

Why isn't PHP reading my values correctly? One Color <input type="radio" name="NumberOfColors" id="oneColor" value="oneColor" checked/><br> Two Colors <input type="radio" name="NumberOfColors" id="twoColor" value="twoColor"/><br& ...

phphtmlpost

What is the best way to access the child DOM of a Vue element?

Is there a way to access the child DOM element of a Vue component? In the code snippet below, I am trying to retrieve the <input> element nested within the <div>. var vm = new Vue({ el: '#box', data: { pick: true, a: & ...

htmlvue.jsconsole

Eliminating render-blocking CSS in PageSpeed - one stylesheet at a time

Currently, I am testing the best optimization practices for front-end development. As part of this process, I have utilized gulp and npm to merge and minify my CSS and JS files into a single all.min.css and js.min.css file. Upon analyzing my website using ...

htmlcssnpmgulppagespeed

Animate your menu on hover with jQuery!

I am experiencing an issue with centering the background image below a link. When using mouseleave, the image does not return exactly to the center of the list. Any assistance on how to resolve this would be greatly appreciated. Thank you! Here is the ref ...

jqueryhtmlcss

Issue with Jquery's .addClass and .removeClass functions

I'm having trouble implementing a dynamic menu on my webpage using jQuery. I've tried writing the code myself but it doesn't seem to be working as expected. The structure involves three classes: .dead, which sets display: none; in CSS, .hea ...

jqueryhtmlcsstwitter-bootstrap