The SVG element seems to have a mind of its own, refusing to obey my CSS commands and stubbornly remaining centered on the screen. I'm at a loss as

I am facing an issue with positioning SVG elements on a web page. Even though I have set the x,y coordinates to 0,0 and used CSS to position it on the left side of the page, the SVG remains in the center.

Here is a link to the problem replicated in jsFiddle: 

https://jsfiddle.net/wf806vvL/

Below is the HTML code: 

svg {
  float:left;
  content-align: left;
  padding-left: 0;
}
<svg xmlns="http://www.w3.org/2000/svg" id="circleGroup" width="100%" height="100vh" viewBox="0 0 700 1000">
  <circle id="circle" class="circle" cx="100" cy="125" r="20" fill="#1dacf9" stroke="black" stroke-width="2"/>
</svg>

I have tried various CSS styling options related to positioning, as well as placing the SVG in a div and applying positioning to it, but nothing seems to work.

My limited understanding of CSS and HTML has led me to exhaust all possible solutions, so I'm reaching out for help here. It's likely that I am missing something obvious, so any insights would be appreciated.

Does anyone know why this issue persists?

javascripthtmlcsssvg

Answer №1

The circle is not properly positioned within the viewbox.

If you set viewBox="0 0 700 1000", the center coordinates for your circle should be cx="350" cy="500"

svg {
  width: 25%;
  /* added for demonstration purposes */
  margin:auto;
  display:block;
  border: 1px solid grey;
}
<svg xmlns="http://www.w3.org/2000/svg" id="circleGroup" viewBox="0 0 700 1000">

  <circle id="circle" class="circle" cx="350" cy="500" r="20" fill="#1dacf9" stroke="black" stroke-width="2" />
</svg>

Answer №2

By changing the attribute from height="100vh" to 100%, and adjusting the values of cx to 21 and cy to 100, you can position the circle exactly where you intend it to be:

<svg xmlns="http://www.w3.org/2000/svg" id="circleGroup" width="100%" height="100%" viewBox="0 0 700 1000">
  <circle id="circle" class="circle" cx="100" cy="21" r="20" fill="#1dacf9" stroke="black" stroke-width="2"/>
</svg>

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

Automating link clicking on a webpage using Selenium and Python based on text or style characteristics

Struggling to navigate the bet365.com website, particularly with the page that lists all horse races happening today. The URL in question is . My goal is to click on one of the race links displayed on this page. Below is the HTML source code: < div cl ...

pythonhtmlseleniumxpathbeautifulsoup

Is there a proven method to instantly update local state in React/Redux without needing to wait for a response from an API call?

Summary: Are there any well-known solutions using React/Redux to achieve a fast and responsive UI, while seamlessly updating an API/database even in cases of failed requests? I want to develop an application featuring a "card view" functionality using htt ...

javascriptreactjsreduxsetstate

Including Parameters in File Paths with ExpressJS

I am currently facing an issue with uploading specific photos to a client's folder within my public/assets directory. The file path I am aiming for is public/assets/:id. However, when running my code, the file path always ends up being public/assets/u ...

javascriptnode.jsexpress

Show the MySQL query results in a pop-up alert box

I need assistance with querying a MySQL database for certain results using PHP and then displaying the result in an alert dialog box through JavaScript. I am able to connect to the database, query the data successfully, and display it on a PHP page. Howeve ...

phpjavascriptmysql

Using JQuery Ajax in Internet Explorer will only execute a single time

I've encountered an issue with my code where I have set cache to false, but in Internet Explorer it only runs once. Can someone please assist me with this problem? <script type="text/javascript" src="javascripts/jq1.7.js"></script> <sc ...

phpjavascriptjqueryajax

Utilizing an object for Device Orientation Controls instead of a camera within Three.js

As I embark on my journey with Three.js, I am taking my first steps into the world of device orientation controls. While exploring demos on the Three.js website, I noticed that most examples only involve manipulating the camera. I am eager to find an examp ...

javascriptthree.js

Issue with locating image source in Angular 4

I'm struggling to source an image using angular 4. It keeps giving me an error message saying that the image cannot be found. Here is my folder structure: app_folder/ app_component/ - my_componenet - image_folder/ - myimage I am trying to ...

htmlimageangularsrc

"Learn how to showcase a picture in full-screen mode when the webpage is opened

I recently came across a script on Stack Overflow that allows me to select an image at random from an array. The script can be found here: Script to display an image selected at random from an array on page load However, I want to take this concept furthe ...

javascriptjqueryhtmlcss

Selecting Messages in a Scala Play Application

After running the sample code in play 2.2 "comuputer-database-jpa", I came across a specific part in the Conf/Messages file: # Messages computers.list.title={0,choice,0#No computers|1#One computer|1<{0,number,integer} computers} found I found this co ...

htmlscalaplayframeworkplayframework-2.0

Implementing Google Maps on a webpage with a dynamic drop-down form using a combination of Javascript and PHP

On my HTML page, I have two drop-down lists populated with data from a MySQL database including latitude, longitude, and address. The user selects an item from the first drop-down and clicks submit. Upon submission, I want to display a Google map with a m ...

phpjavascriptmysqlgoogle-maps

Tips for positioning a Wordpress navigation bar to the right of a logo

My goal is to position the navigation bar next to the logo in my Wordpress theme using Underscores. I have successfully aligned the primary navigation and the logo as desired with the following CSS: .main-navigation { position: relative; float: ri ...

htmlcsswordpress

Struggling with CSS due to the INCLUDE Function

After downloading a Template + CSS File for the website I am working on, everything was going smoothly until I decided to break down the template into separate files for easier modification and editing in the future. However, once I cut out the head sectio ...

phpcss

Is there a way to retrieve text from within a div using code behind in asp.net with c#?

I am currently developing a SQL QUERY editor where users can enter queries. The entered text is then passed to a SQL COMMAND for execution, and the results are displayed to the user in a GRIDVIEW. However, I am facing an issue in retrieving the text entere ...

javascriptc#htmlcssasp.net

The jQuery ajax request hangs indefinitely without triggering success or error callbacks

I have a jQuery ajax request to the server that triggers a redirect to a second page upon completion. It usually works fine, but in cases where the server response is delayed (e.g. 10 minutes), the callback function may not be executed, leaving the request ...

phpjavascriptjqueryajaxtimeout

Experiment with using webdriverio and javascript to select checkboxes

Currently, I am experimenting with testing the selection of checkboxes using webdriverio in combination with mocha and chai. Below is an example of what I attempted utilizing a javascript module pattern select_checkbox: function(browser, key, value){ r ...

javascriptjqueryseleniumcheckboxwebdriver-io

Enable the use of multiple decimal separators in a ReactJS application

I am currently developing a small project that involves using a POST request, which requires multiple fields with 2 float values. My backend system expects the decimal separator to be a ".", but my target audience is primarily French and they ar ...

javascriptreactjs

What is the best way to dynamically insert an image into an <li> element?

I am looking to enhance my menu by adding an image below each li item as a separator. How can I achieve this using CSS? I want the images to automatically appear whenever a new li tag is added to the ul. Here is the HTML code: <ul class="menu"> ...

htmlcsshtml-listsbackground-image

Adjust the text size of a label in material-ui

Hey everyone, I'm struggling with something here. I need to adjust the font size of the label that goes along with my textfield. So far, I've only been able to change the font size of the input itself and not the label. Here's the code for ...

javascriptreactjsmaterial-ui

The issue with ThreeJS where the camera movement stops working after clicking

Seeking assistance with implementing camera movement in ThreeJS. Despite having no errors, clicking the button does not trigger the camera movement as expected. The function aimed at moving the camera by 200 units in all directions seems to have no effec ...

javascriptthree.jstween

Guide on grabbing characters/words typed next to # or @ within a div element

Within a div element, I have enabled the contenteditable property. My goal is to capture any text input by the user after typing '#' or '@' until the spacebar key is pressed. This functionality will allow me to fetch suggestions from a ...

javascriptjqueryhtml