The thickness of an SVG line increases as it is rotated

I am working with multiple straight lines and have specified the stroke-width as 4. However, when I attempt to rotate them, the lines appear thicker than expected. Additionally, setting a negative value, such as 

<path d="M0 -10 20 0" stroke-width="4" stroke="red"></path>
, almost makes the line disappear entirely.

<svg id="svg" width="100%" height="50">
   <path d="M0 10 40 0" stroke-width="4" stroke="red"></path>
   <path d="M40 0 80 0" stroke-width="4" stroke="blue"></path>
   <path d="M80 0 120 0" stroke-width="4" stroke="green"></path>
</svg>

htmlcsssvg

Answer №1

According to @Temani Afif, half the width of the line extends beyond the border of the SVG canvas.
Take a look at how I indicated the canvas borders with a gray line:

<svg id="svg" width="100%" height="50" style="border:1px solid gray;">
   <path d="M0 10 40 0" stroke-width="4" stroke="red"></path>
   <path d="M40 0 80 0" stroke-width="4" stroke="blue"></path>
   <path d="M80 0 120 0" stroke-width="4" stroke="green"></path>
</svg>

To fix this issue, you can add a viewBox and shift the entire image downwards by adjusting the viewBox parameter value to -10.

By using percentages for the width and height of the SVG canvas, your application becomes responsive. 

<svg id="svg" width="100%" height="100%" viewBox="0 -10 150 50" style="border:1px solid gray;">
   <path d="M0 10 40 0" stroke-width="4" stroke="red">& lt;/path>
   <path d="M40 0 80 0" stroke-width="4" stroke="blue"></path>
   <path d="M80 0 120 0" stroke-width="4" stroke="green"></path>
</svg>

You can also move the entire image down by 10 pixels using the command transform="translate(0 10)"

<svg id="svg" width="100%" height="100%" viewBox="0 0 150 50" style="border:1px solid gray;">
  <g transform="translate(0 10)">
  <path d="M0 10 40 0" stroke-width="4" stroke="red"></path>
   <path d="M40 0 80 0" stroke-width="4" stroke="blue"></path>
   <path d="M80 0 120 0" stroke-width="4" stroke="green"></path>
   </g>
</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

The page only appears properly after clearing the cache

My floating list menu is behaving oddly in Firefox. It only displays correctly after clearing the cache, but as soon as I refresh the page, the menu breaks again. The links inside the list elements appear wider than the text, even though I haven't se ...

htmlcssfirefox

Unable to Toggle Bootstrap 5 Dropdown

Take a look at my code below. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor ...

javascripthtmlcssvue.js

SyntaxError: Identifier was not expected

I am currently working on a function that involves a table of rows with edit buttons. Whenever the edit button is clicked, the following function is called and I encounter this error: Uncaught SyntaxError: Unexpected identifier The error seems to be poin ...

javascriptphphtml

What is the best way to customize the appearance of Image tags located inside SVGs, whether they are in separate files or embedded within the code

I am developing a custom SVG editor application and facing an issue with implementing a highlighted effect when an <image> element is clicked. I have successfully accomplished this for other elements like <circle> by adjusting attributes such a ...

javascripthtmlcsssvgsnap.svg

Update a script that handles input float labels to support textarea elements as well

I am looking to modify a float label script that currently works for input boxes in order to make it work for textareas. I attempted to add $fields.on("textarea", floatLabel) to the script but it did not produce the desired result. Any suggestions or assis ...

javascripthtmlcss

The overflow scroll feature is activated, causing the background to appear greyed out, yet the

I've been struggling for hours to achieve this layout: Check out the code example here html, body { height: 100%; overflow-y: hidden; overflow-x: hidden; margin: 0px; padding: 0px; } .MyNavbar { height: 30px; background-color: red; } ...

htmlcss

Tips for checking form input validity prior to opening a modelDialog

After successfully validating all required form fields, I am trying to open a modal dialog. Although I have managed to validate the form, I am struggling to write the code that will trigger the opening of the modal dialog upon successful validation. Do y ...

javascriptjqueryhtmlspring-mvc

Crosschecking form password with MySQL database for verification

As a newcomer to PHP, I am facing challenges while setting up a login system. My struggle lies in verifying if the password entered in a form matches the corresponding email stored in a MySQL database (considering the email address was also submitted on th ...

phphtmlmysqldatabaseauthentication

Banner advertisement on a webpage

Currently, I am working on a website project for clients who are interested in having background ads displayed throughout the entire site. In terms of coding this feature with CSS, it is relatively straightforward: body { background-image: url('a ...

jqueryhtmlcssbackgroundads

Align a collection of images in a grid format on the center of the page with

I am trying to center a div that contains multiple 145px X 145px thumbnail images without setting a fixed width. The goal is to have as many images in each row as the browser window can fit. However, I want to keep the images left-aligned within the center ...

javascripthtmlcssdynamiccenter

The keyframe spinner fails to function properly on Firefox and results in blurry text

I am facing an issue with a keyframe spinner that rotates an image on the y-axis. It works perfectly in Chrome but fails to function in Firefox. I have tried changing the HTML tags to div or span class/id, but nothing seems to work. Interestingly, other ke ...

htmlcss

Discovering the true width of elements that have overflow hidden in IE7 using jQuery

I am dealing with a dynamic list that contains around 50 elements, but the exact number may vary. <div style="width:465px;"> <ul> <li>aaa</li> <li>aaa</li> <li>aaa</li> <li>aaa& ...

jquerycssinternet-explorer-7

Delete a table row based on the values of checkboxes using Jquery

I've successfully generated an array from values selected in an HTML form using checkboxes. Is there a way to pass these selected checkbox values to jQuery and utilize the code $('tr#myTableRow').remove(); for each value in the array submit ...

jqueryhtmlforms

What is the method for attaching a keypress event to an HTML document?

Looking to add an interactive touch to my website by creating a "press any key" page. When a key is pressed, I want it to kick off animations that bring the page to life - like sliding elements in from different directions. Open to using jQuery or plain ...

javascriptjqueryhtmlcss

Create a button that matches the dimensions of the background image

I am working with a form that includes a submit button featuring a background image. <button type="button" class="button" alt="Send" onclick="validate_form_newsletter_wide( form )"></button> Everything works well when I define the dimensions ...

htmlcss

Creating evenly spaced PHP-generated divs without utilizing flexbox

My goal is to display images randomly from my image file using PHP, which is working fine. However, I am facing an issue with spacing the images evenly to fill the width of my site. This is how it currently appears: https://i.stack.imgur.com/AzKTK.png I ...

javascriptphphtmlcss

jQuery carousel displaying a blank slide at the conclusion

I am experiencing an issue with my slideshow where it shows an empty slide after the last element. I suspect that there is something in my script causing this behavior, as it seems to be finding one extra child for the element and adding it as an empty spa ...

javascriptjqueryhtml

What accounts for the different behavior of line-height when using units vs percentage or em in this instance?

I'm puzzled by the behavior of the CSS code provided, which is also demonstrated in this fiddle. <style type="text/css"> p { font-size: 14px; } .percentage { line-height: 150%; } .em-and-a-half { line-height: 1.5em; } .decimal { ...

htmlcss

Combining verification with Recaptcha (or necessary information)

I'm looking to customize a form below by setting certain fields as required based on different conditions. I would like the Name and Email fields to be mandatory, with a popup alert if they are left empty: Name Email If the "Phone" checkbox i ...

phphtmlformsrecaptcharequired

What is the best way to create separation between the href attribute of an a tag and the

Currently, I am utilizing Material UI in React and encountering an issue with the spacing between an <a tag and some text both before and after it. The lack of space is causing them to merge together. <Typography style={{ fontSize: 14, textAlig ...

cssreactjsmaterial-ui