Chrome may clip the gradient radius when setting the focal point outside of the SVG gradient

I just joined this community and I might have some questions that could be considered too basic.

Recently, I've been trying to understand SVG and came across something that left me puzzled.

Take a look at this:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
<defs>
     <radialGradient id="Gradient5" cx="0.5" cy="0.5" r="0.5" fx="0.13" fy="0.13">
         <stop offset="0%" stop-color="red"/>
         <stop offset="100%" stop-color="blue"/>
     </radialGradient>
</defs>
 
<rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient5)" stroke="black" stroke-width="2"/>
</svg>

What's with the top left corner in the image? I struggle with mathematical concepts and I sense that this issue is math-related. Can someone offer guidance?

csssvg

Answer №1

The gradientStop at 0% has been mapped outside the radius of the gradient, resulting in it not being displayed. It is important to note that adjusting the fx/fy coordinates to just inside the gradient area will resolve this issue. This seems to be a bug specific to Chrome, as both IE and Firefox handle it correctly by setting the focal point at the closest perimeter point. A bug report may need to be filed for this.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
<defs>
     <radialGradient id="Gradient5" cx="0.5" cy="0.5" r="0.5" fx="0.15" fy="0.15">
         <stop offset="0%" stop-color="red"/>
         <stop offset="100%" stop-color="blue"/>
     </radialGradient>
</defs>
 
<rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient5)" stroke="black" stroke-width="2"/>
</svg>

Answer №2

Check out this new code snippet - I made adjustments to both fx and fy by setting them to 50%

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px>
<defs>
     <radialGradient id="Gradient5" cx="0.5" cy="0.5" r="0.5" fx="50%" fy="50%">
         <stop offset="0%" stop-color="red"/>
         <stop offset="100%" stop-color="blue"/>
     </radialGradient>
</defs>
 
<rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient5)" 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

CSS:Tips for removing borders with border-radius in CSS

I have a div that has been styled with a left-hand border, and it's causing me some trouble. You can view the styling here on Jsfiddle. Is there a way to remove just the left hand side border without affecting the rest of the design or creating an un ...

htmlbordercss

Enhance Your Joomla 2.5 Website with Custom CSS Specifically for iPad Viewing

Is there a way to load a specific CSS file when accessing my Joomla website through an iPad? I am running Joomla version 2.5. Although I have set up style-sheets for browsers like Internet Explorer and Firefox, I am unsure how to target the website to lo ...

phphtmlcssjoomlajoomla2.5

"Unfortunately, the Datatables Individual Column Search feature is not compatible with the

I am currently using Datatables to showcase a large dataset with over a thousand rows in a table format. To enable users to search for specific information within each column, I have implemented the feature of individual column search. The initial setup of ...

jquerycssdatatables

Footnote fiascos

I am currently in the process of creating a footer for my webpage and have implemented the following CSS styling: #footer { height: 100px; background-color: #F3F3F3; position: absolute; bottom: 0; } Although the footer is displaying at th ...

htmlcss

Leveraging font as a comprehensive repository of icons

I have been experimenting with using entypo as the icon source for my web application. The UI technology I am working with is ZK. However, I encountered an issue when trying to include an icon from that font by using: <span sclass="entypoWhite">&am ...

cssfontszk

Expanding the input focus to include the icon, allowing it to be clicked

Having trouble with my date picker component (v-date-picker) where I can't seem to get the icon, a Font Awesome Icon separate from the date-picker, to open the calendar on focus when clicked. I've attempted some solutions mentioned in this resour ...

csshtmlvue.jssass

Achieving full-width container on mobile devices with Bootstrap

Despite my efforts in the CSS file, I am still struggling to get the container to take up the full width on mobile devices. Here is my CSS code: @media (max-device-width: 1024px) { .col-sm-2{ width: 100%; } .container { margin: 0 auto; width: ...

htmlcssbootstrap-4

Customizing button appearances in the control div on Google Maps - A guide

Is there a way to manipulate elements and adjust styles by clicking buttons on the map control div? I want to achieve the same effect on the map as with the buttons in the table. Code: jsFiddle Update: Thanks to your assistance, I was able to achieve th ...

javascriptcssgoogle-mapsgoogle-maps-api-3google-maps-styling

What are the best ways to format an outgoing email using inline CSS?

On my upcoming website, I have set up a single form for guests to subscribe. The issue I am facing is with styling the email that is sent upon submission. I attempted using inline CSS, but it doesn't seem to be working. Instead of transforming the cod ...

phpcsshtml-email

Conflict between the top menu and body on the HTML page is causing issues

Encountered an issue with my HTML code: CSS: .fixedmenu { overflow: hidden; background-color:rgb(153,0,51); position: fixed; /* Ensures the navbar stays in place */ top: 0; /* Positions it at the top of the page */ width: 100%; /* Occ ...

htmlcss

Challenges with resizing in Bootstrap

I need assistance with my login form that is appearing in a Bootstrap modal. The modal I am using is the standard size, not the larger one. In the form, there are 2 input fields and a login button on the left side, while the right side should contain other ...

htmlcsstwitter-bootstrap

Adding content between previous and next buttons with the use of JavaScript

After successfully implementing the functionality for the previous and next buttons in my script, I was requested to include the date between the buttons like this: btnPrev issueDate btnNext < Date > Although I tried adding the date between the PREV ...

javascripthtmljquerycss

Map region indicator tooltip

I possess a map that contains a specific area with a title. Here is the accompanying code: <map name="Map" id="Map"> <area alt="" shape="rect" coords="127,52,186,71" href="#" title="Extending telephone lines to other Egyptian governorates ...

jqueryhtmlcss

Is there a way to insert text onto an Isotope image?

I recently created a portfolio using Isotope and Jquery, but I am struggling to add descriptive text to my images without disrupting the layout of the portfolio. I have experimented with various options such as using position:relative for the images and p ...

jquerycssblogs

How can we combine Angular Gradients and CSS Webkit Gradients for a modern design

Can a gradient be created that resembles the color picker style shown here? The outer part showing full saturated, 50% brightness values and transitioning towards the inside to 100% brightness. ...

csscolorsgradientcolor-picker

Add a unique CSS style to both text and image using anchor tags

Why isn't the hover effect of color transition and underline being applied to the image? It seems to only work for text. While I understand that the color transition may require a change in image color, shouldn't the underline still occur? This ...

javascripthtmlcss

As the browser window is resized, the gap between images widens while the images themselves decrease

Hey there, I'm encountering some trouble with the image links at the top of my page. As I resize the browser or change screen resolutions in media queries using percentages, the images are resizing accordingly. However, I'm noticing that as the i ...

htmlcssimagescalespace

Instructions for accessing and printing text from a nested ul tag with Selenium in Java

Hello everyone, I am currently learning about Selenium Automation and have created a website as shown below. Here is the HTML code: <!DOCTYPE html> <html> <head><title>Shop</title></head> <body> <ul> < ...

javahtmlcssseleniumselenium-webdriver

Can you explain the significance of xs, md, and lg within the CSS Flexbox framework?

Currently in the process of developing an application using React and looking to apply some styles to my components. I stumbled upon which delves into a fluid grid system. A snippet from the example is shown below: <Row> <Col xs={12} sm={3} m ...

cssreactjsflexboxreact-flexbox-grid

Using jQuery to locate a JavaScript variable is a common practice in web development

I recently created a JSFiddle with buttons. As part of my journey to learn jQuery, I have been converting old JavaScript fiddles into jQuery implementations. However, I seem to be facing a challenge when it comes to converting the way JavaScript fetches an ...

javascriptjqueryhtmlcssvariables