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

Issues with Implementing Custom CSS Styles in ag-grid

It seems like a simple customization, but the documentation on it is quite limited. I'm trying to change the line-height of one of my tables so that text doesn't double-space when wrapping. Here's the CSS code from Test.module.css: .ag-them ...

cssreactjsnext.jsag-grid

Having trouble with CSS media queries not functioning properly on Internet Explorer version 9?

Incorporated media queries in my design to adjust the width of certain elements on the page according to the browser's width. These are the queries I am using: @media screen and (min-width:1024px) @media screen and (max-width:1024px) Chrome, Safari, ...

cssinternet-explorermedia-queries

Learn the best practices for incorporating jQuery and other JavaScript libraries in your Angular2 projects

Is it possible to integrate a demo showcasing Bootstrap carousel with CSS3 animations in Angular2 using HTML, CSS, and JS? I have created my own implementation in Plunker with Angular2, but I am facing issues with the animated inner content of the carousel ...

javascripthtmlcssanimationangular

Why isn't this code for hiding the animation and displaying it not functioning properly?

Why isn't this animation from display none to block working properly? The initial code appears as follows, and it functions correctly: $(".box_outer").stop().animate({top: '25px' , opacity: 1}, 100); When I add display: none; to the class ...

javascriptjquerycssanimation

Excessive HTML and CSS overflow stretching beyond the boundaries of the page on the right

It seems like the issue lies with div.ü and div.yayın, as they are causing overflow on the right side of the page. When these elements are removed, the overflow issue goes away. Are there different positioning codes that can be used to prevent this? d ...

htmlcss

Guide on enabling the scrollbar within a text area while utilizing the pointer-events: none property

After applying the CSS rule pointer-events: none to the text area, I noticed that the scrollbar was disabled. I need the scrollbar to remain enabled so that users can scroll and view the entire content, while still preventing editing within the textarea u ...

htmlcsssassflexboxscss-mixins

Responsive SmoothSlider

Need help fixing the responsive breadcrumbs in my slick slider. The slick-content-slider is taking a strange height and I want to ensure that every div remains on the same line. Thank you in advance! $('.slick-content-slider').slick({ slides ...

cssresponsive-designsliderslick.js

Unveiling the Secret: Empowering a Span to Secure its Territory Amidst an Adv

I have a comment section header where I want the senders name(s) (on the left) and time (on the right) to align at the top. <div style="float:left;">John Doe, Suzie Q</div><span class="pull-right"> Jan 30 at 10:29 PM</span> On s ...

htmlcss

What is the best way to ensure my hover caption spans the entire size of the image?

I'm currently working on creating a hover caption that adjusts itself to fit the full width and height of an image even when it is resized. I attempted to implement a jQuery solution that I came across, but unfortunately, I am struggling to get it to ...

jqueryhtmlcsshovercaption

Is the "position: sticky" feature functioning correctly, or is there a slight vibrating or dancing effect when users scroll through the Ionic app? How can we eliminate this issue specifically on iOS

Looking for suggestions on this problem - the position sticky is functioning correctly, but there seems to be a slight vibration or dancing effect when users scroll in the Ionic app. Any ideas on how to eliminate this issue specifically on iOS devices? & ...

htmlcssuser-interfaceionic-frameworksass

The setting of background-size: cover does not affect the height of the background image

Looking for a solution to make a background image fill a div entirely? Here is the CSS code you can use: .class{ background-image: url('img.jpg'); background-repeat: no-repeat; background-size: cover; } You can implement this within t ...

htmlcsszurb-foundation

What is the reason behind both paragraphs being displayed in a shade of blue in this snippet of code

.red p { color: red; } .blue p { color: blue; } <div class="blue"> <p> first </p> <div class="red"> <p> second </p> </div> </div> Initially, I expected the first paragraph to be bl ...

htmlcss

Customize the appearance of parent components based on the content of their child elements

I am currently working on a component that contains multiple instances, each with its own unique internal component (acting as a modal wrapper). I need to customize the size of each modal instance independently. How can I achieve this customization when th ...

cssangularbootstrap-modalparent-child

Having trouble with jQuery UI draggable when using jQueryUI version 1.12.1?

Currently, I am diving into the world of jQuery UI. However, I am facing an issue with dragging the boxes that I have created using a combination of HTML and CSS. My setup includes HTML5 and CSS3 alongside jQuery version 1.12.1. Any suggestions or help wou ...

javascriptjqueryhtmlcssjquery-ui

How to add a line break within the :after pseudo-element using CSS

I've been struggling to split text inside an :after pseudo-element of a label that receives its content from a data- attribute. I've attempted using word-break, as well as playing around with width, max-width, and position:relative, but nothing s ...

htmlcss

Designing a navigation system that revolves around a central logo image

I have created a navigation bar that you can see in this image: https://i.stack.imgur.com/eT4TL.jpg Using foundation to construct a website, I have designed the nav bar in the following manner: HTML: <nav class="top-bar"> <ul> ...

csshtmlzurb-foundation

Is there a way to eliminate padding and increase the size of images in mobile view?

Over on my photography blog, I'm working on adjusting the padding within the blue box, increasing the size of my images, and eliminating hover effects for mobile views. Despite my efforts, the code I've implemented hasn't produced the desire ...

cssmobileresponsive-design

Can you explain the purpose of CSS classes such as my-2, my-lg-0, and mr-sm-2 in Bootstrap 4?

I have searched through various questions and the Bootstrap documentation but haven't been able to determine the purpose of these classes on elements. Any assistance would be greatly appreciated! My goal is to adjust my search bar's size to 1/4th ...

htmlcsstwitter-bootstrapbootstrap-4navbar

"Customize the font style of columns in a WordPress table created with TablePress by setting them to it

Recently, I designed a table in a WordPress blog using the TablePress plugin. My intention now is to style the left column's font in italics, excluding the table header. ...

csswordpress

What is the best way to bridge the gap between the rows?

After combining the top and bottom blocks, I now have a gap in my layout. Is there a way to move this row up without causing any issues? I need assistance with resolving this problem using Bootstrap. <link rel="stylesheet" href="https://maxcdn.boots ...

csstwitter-bootstrap-3