Can you explain the concepts of stroke and stroke width in SVG, and how they are implemented in HTML rendering?

<svg width="400" height="400" style="background-color:green">

   <circle cx="200" cy="200" r="50" stroke="red" stroke-width="5" fill="yellow"></circle></svg>

<svg width="400" height="400" style="background-color:green">

   <circle cx="200" cy="200" r="50" stroke="red" stroke-width="50" fill="yellow"></circle></svg>


<svg width="400" height="400" style="background-color:green">

   <circle cx="200" cy="200" r="50" stroke="red" stroke-width="100" fill="yellow"></circle></svg>


<svg width="400" height="400" style="background-color:green">

   <circle cx="200" cy="200" r="50" stroke="red" stroke-width="150" fill="yellow"></circle></svg>

https://i.sstatic.net/uRlkR.pnghttps://i.sstatic.net/HjSfl.pnghttps://i.sstatic.net/axUqN.pnghttps://i.sstatic.net/qpUNX.png

I am new to the world of SVGs and I find myself a bit perplexed by the stroke and stroke width properties. When I increment the stroke width, it appears that the area within the circle expands whilst the dimensions remain constant at 100x100. I can't figure out whether the stroke width is added to the radius or if my understanding is off. Could someone please shed some light on the concepts related to svgs? Any guidance or resources for me to delve deeper into this topic would be highly appreciated.

htmlcsssvg

Answer №1

Understanding SVG Stroke and Stroke-Width Properties

  • The stroke property in SVG determines the color of a line, text, or outline within an element.

Similarly, the stroke-width property defines the thickness of a line, text, or outline within an SVG element.

  • For more information on SVG properties related to stroking, you can refer to this informative article by W3Schools.

SVG operates on XML language, allowing for each element to be accessed within the SVG DOM. This facilitates the attachment of JavaScript event handlers to elements.

In SVG, every drawn shape is stored as an object. When attributes of an SVG object are modified, the browser can automatically update and redraw the shape accordingly.

If you're encountering an issue where the maximum stroke-width for a circle with a radius of 50px is exceeded, it's a straightforward math problem. The maximum stroke-width for a circle with a radius r=50px is 2*r, resulting in 100px.

When setting a stroke-width of 150, it indicates that the stroke-width radius needs to be increased to account for the larger value. Chrome may display the circle as 100x100; however, only the stroke radius changes, not the circle's actual radius.

To further illustrate this concept, try adjusting the stroke-width to 500px, and observe how the visual representation changes to grasp a better understanding.

This issue could also be viewed as a bug; you can track its progress through the following link.

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 connect to a specific part of a webpage that functions properly on Safari?

On my website, I have a testimonials page with a featured testimonial on the homepage that has a "Read More" option. When users click on this link, I want them to be taken directly to the testimonials page and to the specific section where that particular ...

htmlcss

Obtain the URL of the hyperlink when clicked

After the scenario described above, I am looking to have a user click on a hyperlink and then have it copied into a PHP variable. Is this achievable? I attempted the following but it doesn't seem to be working. Any suggestions? Code: <script ...

phphtml

What is the process for invoking a JavaScript function and storing form data in a text file within an HTML document?

My HTML code is here..... <!DOCTYPE html> <html> <title>Plot</title> <head> <script type="text/javascript" src="d3.min.js"></script> <script> function filter() { var choice = document.ge ...

javascripthtml

Tips for turning off specific row elements within a formGroup in Angular

Hey there, I'm looking to disable a specific row that is selected through a checkbox. I've tried the code below but it's not working, so I could use some help with it. Thanks in advance! HTML file code: <form [formGroup]="myFormGroup"& ...

htmlangularangular6angular7

Organizing MySQL query results in PHP by displaying them in three columns with multiple rows

I am looking to feature a gallery section on my website. The layout I have in mind consists of 3 slides, with each slide containing 3 columns. The first column should be col-md-6, while the second and third columns should be col-md-3 each. Specifically, I ...

phphtmlcssbootstrap-4

Using Object Values and Subvalues to Assign Element Attributes in jQuery

I have a weekly schedule that I update regularly using a static table layout: <table> <tr class="live gm fsp"> <td>Oct. 7</td> <td>12:30 pm</td> <td class="prog">Show 1</td> <td>Team ...

javascriptjqueryhtmljsonobject

The HTML element does not expand to fill the entire page

I recently encountered a problem with my website. Everything was functioning smoothly until I decided to add some in-page links to a large page. After adding the links, the background no longer stretched the entire length of the page. When scrolling down, ...

htmlcssbackground

Maintaining CSS elements in position

Hello everyone, I have a project at work where I need to create a map with specific cities pinpointed. I've completed it on my computer and now I'm trying to ensure that when I transfer it to another device, like a laptop, the points remain in t ...

htmlcss

Tips for creating a button hover effect with dynamic color and opacity

On my webpage, the button color is determined by an admin using JavaScript on page load. Since I don't know what color will be used, I can't apply rgba(). While using opacity does change the button's color, it also affects the text, which is ...

htmlcss

The smooth scrolling feature is not functioning properly as the links are jumping to the top and bottom instead of scrolling

My links are supposed to smoothly scroll to the bottom and top, but they're not working correctly even though I believe the JavaScript is functioning properly. Here is the JavaScript code: $.fn.ready(function() { // Smooth scroll to top ...

javascriptjqueryhtmlcssscroll

Can you explain the functionality of this: http://welbog.homeip.net/ ?

Can you explain how this operates?: All you need to do is scroll down. The design is impressive, absolutely impressive, and it functions seamlessly without the use of javascript. How is that possible? ...

javascripthtmlcssweb

Steps for designing a stationary footer in HTML and CSS

I have implemented a static footer on my website: HTML <div class="card fixedFooter"> <div class="card-body space-around"> <button type="button" class="buttonFooter" routerLink="/myRouter" > <i class ...

htmlcssbootstrap-4footer

Why is it that vanilla HTML/JS (including React) opts for camelCase in its styling conventions, while CSS does not follow the same pattern

Each type of technology for styling has its own set of conventions when it comes to naming properties, with camelCase and hyphenated-style being the two main options. When applying styles directly to an HTML DOM Node using JavaScript, the syntax would be ...

javascripthtmlcssconventions

Having trouble getting XSLT to work properly with the XML file

My XSL file doesn't appear to be functioning properly with my XML data. Despite the simplicity of my code, I am unable to identify the issue. Upon linking to the XSL spreadsheet and opening the document, my XML seems to transform into plain raw Data. ...

htmlxmlxcodexsltxhtml

Disabling a primary color in Google Chrome

One issue I am experiencing is with a color that shows up on my input and textarea fields when they are focused: This issue seems to be present in Chrome, but not in Firefox. I attempted to change the color using jQuery: if ($('body').is(&apos ...

javascriptjquerycssforms

Is it possible to use a jsp:include tag to incorporate a complete JSP page as the content of a tab?

Can someone assist me with defining JSP pages as content for my tabs using the "jsp:include" tag? Here's an example (Note: "page0.jsp")... <ul id="smTabs" class="nav nav-tabs" style="margin-bottom: 15px;"> <li class="act ...

htmljspspring-mvc

What technique does Wordpress use to achieve this understated 3D appearance?

This unique effect that I've come across on various websites is quite subtle. I'm curious about how it achieves this effect. It seems like more than just a border, but also involves the empty space. ...

htmlcssfrontend

concealing directory titles within HTML and AJAX

What are the potential security risks associated with exposing PHP folder names? If there are risks, what methods can be used to conceal the folder names within html hyperlinks and ajax code? ...

phpajaxhtml

Issues with navigation menu not showing dropdown options and impacting webpage layout (HTML/CSS)

I'm having trouble creating a drop-down navigation menu using HTML and CSS. When I add the drop-down list, my menu extends onto two lines instead of one, and the drop-down menu doesn't appear when hovering. Here is a link to the jsfiddle for refe ...

htmlcss

Using XSL to convert XML to HTML, extracting specific elements from various structures based on the shared element value

As a newcomer to XML and XSLT, I have been searching for solutions on Meunchian grouping without much success. The challenge lies in transforming a large XML file, exported from a database with invoicing information, into HTML using XSLT (1.0) with Saxon. ...

htmlxmlxslttransformation