The clipPath feature in webkit fails to display correctly

After reading this insightful article, I decided to experiment with applying a gradient clip-path to a simple shape (an O letter converted to curves).

To my frustration, the technique worked perfectly in Firefox but failed to render anything in webkit browsers.

I tried various solutions, including combining Amit Sheen's code with my own, but the issue persisted. Whenever I attempted to use my path instead of his, the shape would vanish as soon as it was clipped. I'm at a loss as to what is causing this problem.

Could you provide some assistance?

.gradient {
    width: 157px;
    height: 157px;
    background: linear-gradient(90deg, rgba(6,94,115,0.7959383582534576) 0%, rgba(207,241,255,1) 100%); 
    border-radius: 50%;
}
<svg viewBox="0 0 1000 400" xmlns="http://www.w3.org/2000/svg">

    <clipPath id="clip">
        <path d="M547.923,151.764C504.147,151.764 471.027,185.46 471.027,228.372C471.027,270.996 504.147,304.98 547.923,304.98C591.987,304.98 625.107,270.996 625.107,228.372C625.107,185.46 591.987,151.764 547.923,151.764ZM547.923,269.844C523.731,269.844 508.467,251.124 508.467,228.372C508.467,205.62 523.731,186.9 547.923,186.9C572.403,186.9 587.667,205.62 587.667,228.372C587.667,251.124 572.403,269.844 547.923,269.844Z" />
    </clipPath>
    
    <foreignObject x="470" y="150" width="157" height="157" clip-path="url(#clip)">
        <div class="gradient" xmlns="http://www.w3.org/1999/xhtml"></div>
    </foreignObject>

</svg>

csssvgfirefoxwebkit

Answer №1

To ensure compatibility with Chrome, it may be necessary to adjust the positioning of your path so that its top left corner aligns with the point (0,0). This adjustment is required for Chrome but may not be effective in Firefox unless the foreign object has x="0" and y="0" attributes. Rather than specifying x and y attributes for the foreign object, I opted to translate it to the specified point.

svg{background:silver}
<svg viewBox="0 0 1000 400">

  <foreignObject width="157" height="157" transform="translate(471,151)" clip-path="url(#clip)">
    <div style="height:100%;background:gold"> </div>
  </foreignObject>

  <clipPath id="clip">
    <path id="p" transform="translate(-471,-151)" d="M547.923,151.764C504.147,151.764 471.027,185.46 471.027,228.372C471.027,270.996 504.147,304.98 547.923,304.98C591.987,304.98 625.107,270.996 625.107,228.372C625.107,185.46 591.987,151.764 547.923,151.764ZM547.923,269.844C523.731,269.844 508.467,251.124 508.467,228.372C508.467,205.62 523.731,186.9 547.923,186.9C572.403,186.9 587.667,205.62 587.667,228.372C587.667,251.124 572.403,269.844 547.923,269.844Z" />
  </clipPath>


</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

Are there any other methods of using HREF in an <asp:Button> besides OnClientClick for invoking an inline div?

I decided to create a concealed <div> on the same page and tried calling it with href="#", which worked perfectly. However, when I attempted to use the same code in ASP.net, I encountered some issues with Javascript or other factors that prevented it ...

javascriptasp.nethtmlcsshref

Having trouble applying styles to a component using forwardRef

I'm relatively new to React and still trying to wrap my head around the component's lifecycle. However, the issue at hand is proving to be quite perplexing. One thing that confuses me is why adding "setState(10);" causes the style of the "Test" ...

javascripthtmlcssreactjs

Navigate divs with varying z-index values

I want to change the z-index of 3 divs by toggling them using jQuery, but I'm not sure how to do it. What I want is to click a button that relates to a specific div and increase the z-index of that div so the content inside it is shown. Currently, all ...

javascriptjqueryhtmlcss

What is the process for adjusting the width of an element using JavaScript?

I have a unique bar with one half red and the other green. I am trying to subtract 1vw from the width of the red section. Unfortunately, using style.width is not yielding the desired result. See below for the code snippet I am currently using: //FIGHT do ...

javascriptcsswidth

Is there a way to decrease the speed of a text when hovering over it?

Is there a way to create a button that displays text before another text only on hover, with a delay? I've managed to achieve the effect but can't figure out how to slow it down. For example, notice how quickly the word "let's" appears when ...

htmlcsscss-transitionspseudo-element

Hide object scroll percentage with CSS styling

Is there a way to dynamically hide an element based on the user's scrolling behavior? I have incorporated floating social buttons into my website, and I am looking for a solution that will hide them when the user reaches the bottom of the page (foote ...

cssscrollhidepercentage

Can display-inline-block support top margin and text alignment?

Can you please explain if the top margin and text-align properties work for both display: inline and display:inline-block? If they do, could you provide some insight as to why? ...

htmlcssblockinlinedisplay

Ways to showcase tooltip text for an unordered list item?

When creating an unordered list, each element's text corresponds to a chapter name. I also want to include the description of each chapter as tooltip text. The Javascript code I currently have for generating a list item is: var list_item = document.c ...

javascripthtmlcss

What is the solution to incorporating a scrollbar in a popup when I increase the zoom level?

When trying to add a scrollbar to the popup, I am facing an issue where the scrollbar does not appear when zoomed in to 75% or 100%. It works fine for fit screen but not on zoom. Can anyone help me identify what is wrong with my code and suggest how to han ...

javascripthtmlcss

Manage the application of CSS media queries using JavaScript

Is there a method to control which CSS media query a browser follows using JavaScript? As an example, let's say we have the following CSS: p { color: red; } @media (max-width: 320px) { p { color: blue; } } @media (max-width: 480px) { p { col ...

javascriptcssmedia-queries

"Interactive Connect 4 Game in Javascript - Drop the disk into the bottom row of the chosen

Check out this awesome Connect4 game I found: http://codepen.io/anon/pen/lmFJf I have a specific goal in mind for the game. When I click on an empty space in any column, I want it to automatically drop into the lowest available spot in that column, follow ...

javascripthtmlcss

Creating a captivating animation for a social media like button with CSS

I came across some animation code on the web and noticed that when I click the image, it replays the animation from the starting point. I want to make it so that when I click the image, the animation plays and stops, and if clicked again, resets the image. ...

javascriptjquerycsshtml

Can the hexadecimal code for a particular color name be identified?

Similar Question: Javascript function to convert color names to hex codes Is there a way to determine the hexadecimal value of a named color that is currently being used by the browser? For example, I would like to achieve something similar ...

javascriptjquerycssdomcolors

Enhancing a popup with animated effects

I have been working on a popup that I want to add a subtle animation to. A fade effect seems like the perfect solution. Here is the code for the button: <a href="javascript:void(0)" onclick="document.getElementById('back_overlay').style.disp ...

javascriptjqueryhtmlcss

Javascript-generated HTML elements are invisible

I am attempting to create a "circle of fifths" using html, css, and javascript. I am following this tutorial: https://blog.logrocket.com/interactive-svg-circle-of-fifths/ Although I am using the astro framework, I don't believe my issue is related to ...

javascripthtmlcssastrojs

floating point for a list item compared to other elements

nav > ul > li { float: left; } #one { float: left; } <nav> <ul> <li> he has a cow </li> <li > he has a dog </li> <li> he has a mouse </li> </ul> & ...

htmlcss

Utilize JQuery to implement fading effects for clicked elements in a webpage

I've been using a rollover JavaScript plugin to create smooth transitional effects when users hover over clickable page elements. Everything was going well until I decided to switch to making ajax calls instead of page loads for dynamic content. The p ...

javascriptjqueryhtmlcss

I'm looking to create a JavaScript function that will extract each element from a div and then apply a corresponding CSS block to activate it

My goal was to create this function using Flask, but it seems that only JavaScript is capable of achieving it. This is my first attempt at coding it. Here's the code snippet: const navSlide2 = () => { const burger = document.querySelector(&apos ...

javascripthtmlcss

Change the position of a Div by clicking on a different Div using JQuery for custom movements

I have successfully managed to slide the div left/right based on the answers below, but I am encountering some issues with the top div. Here are the specific changes I am looking to make: 1. Make both brown lines thinner without affecting the animations. ...

javascriptjqueryhtmlcss

When a custom icon is clicked in the vue-select dropdown, the custom method is not activated

In my current project, I am creating a vue-component based on vue-select. Within this component, I have added a custom info Icon. The issue I am facing is that when the user clicks on the Icon, instead of triggering my custom method getInfo, it opens the s ...

javascriptcssvue.jstailwind-cssvue-select