Why is my clip-path not working when it's source is an svg?

Why is my clip-path not working when it's source is an svg?

By : user2950923
Date : November 17 2020, 11:58 AM
I think the issue was by ths following , Put your clipPath in defs tags. Use foreignObject to import the HTML elements that needs to be clipped and apply inline clip-path for maximum browser support.
code :
#kitten {
  width: 250px;
#kittenReplica {
  width: 250px;
  height: 187.5px;
  background-color: lightblue;
<svg width="500px" height="187.5px">
    <clipPath id="path" clipPathUnits="objectBoundingBox">
      <circle cx="0.25" cy="0.25" r="0.25" id="circle" />
      <rect x="0.5" y="0.2" width="0.5" height="0.8" />
  <foreignObject clip-path="url(#path)" width="50%" height="100%">
    <img src="http://i.imgur.com/tzPv43g.jpg" id="kitten" class="clipped" />
  <foreignObject x="250" clip-path="url(#path)" width="50%" height="100%">
    <div id="kittenReplica" class="clipped"></div>

Share : facebook icon twitter icon
SVG Clip Path not working

SVG Clip Path not working

By : Maxim
Date : March 29 2020, 07:55 AM
To fix this issue From the documentation https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath,
code :
<svg width="1000" height="1000">
    <clipPath id="clipPolygon">
        <polygon points="129 43,114 250,389 272,390 54,125 42">
    <rect x="0" y="0" height="1000" width="1000" fill="red" clip-path="url('#clipPolygon')"></rect>
Why does clip-path inset(0 0 0 0) produce a different result than not setting clip path?

Why does clip-path inset(0 0 0 0) produce a different result than not setting clip path?

By : Alex
Date : March 29 2020, 07:55 AM
seems to work fine I can't tell you why, but it looks like a webkit bug with -webkit-clip-path and as far as I can see only happens in Chrome (I've tested it on Firefox, IE, Opera, and Chrome).
Try replacing the webkit -webkit-clip-path: inset(0% 0% 0% 0%); with -webkit-clip-path: rect(0% 0% 0% 0%);
CSS/SVG clip path not working in Firefox

CSS/SVG clip path not working in Firefox

By : Bhavin
Date : March 29 2020, 07:55 AM
seems to work fine Currently a URL that starts with # points into the same file. I.e. if you write #xxx in a CSS file you'd need to have an element with an id of xxx in that CSS file itself.
The relevant specifications have changed recently and I think Firefox will change at some point to assume that #xxx would refer to a resource in the parent document.
Clip and Clip path not working in IE 11

Clip and Clip path not working in IE 11

By : Cos
Date : March 29 2020, 07:55 AM
seems to work fine No need to use clip at all, nor multiple divs.
Use just one, adjust the borders as needed for the bracket body, then a pseudo element for the triangle with the good ol' borders triangle technique
code :
  border: 4px solid red;
  width:100px; height:150px;
  border-radius:0 10% 10% 0; 

  width:20px; height:20px;
  top:50%; transform:translateY(-50%);
  border-top:15px solid transparent;
  border-bottom:15px solid transparent;
  border-left:15px solid red;
<div class="bracket"> </div>
Transform CSS clip-path with mixed (fixed and percentage) values to SVG clip-path

Transform CSS clip-path with mixed (fixed and percentage) values to SVG clip-path

By : chandrakanth527
Date : November 09 2020, 04:01 AM
seems to work fine With the help from Stack Overflow in Russian using SVG mask my solution is this
code :
.container {
  width: 200px;
  height: 200px;

svg {
  width: 100%;
  height: 100%;
<div class="container">
      <mask id="triangle-clip">
        <rect x="0" y="0" width="100%" height="100%" fill="#fff" />
        <path d="M0,20 v-20 h20 z" fill="#000" />

    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
  <rect width="100%" height="100%" fill="url(#grad1)" mask="url(#triangle-clip)" />
Related Posts Related Posts :
  • CSS: display: flex and text ellipsis on the same element
  • Fixed position buttons appearing in incorrect area depending on browser
  • CSS-menu issue in angular project
  • Responsive Website - general enquiries
  • Webkit Scrollbar Buttons only showing horizontal
  • explicitly set a field's width in css to "no-auto"
  • Jekyll accessing page variables from CSS
  • Why did my #wrapDesktopNavBar disappear on desktop view?
  • CSS Menu Multiple Hover Colo(u)rs
  • Line-height works differently on Mac and Windows
  • Resizing an image at will with CSS?
  • CSS Naming Best Practice in MVC Layouts
  • FireFox & Chrome CSS Differs
  • Gradient Border Causing the Border to Disappear
  • How to hide column label on google chart
  • How to change H3 color in bootstrap using CSS file
  • CSS How to align checkbox image
  • css3 jagged edge on left isntead of right
  • display text in a horizontal line , using ng-repeat and bootstrap
  • Css right top corner
  • Bootstrap keep button other border gradient when removing border-left
  • Getting divs in the right postion
  • Rails 4: Sass raises SyntaxError when precompiling assets on server but not on development computer
  • Boostrap css file overrode my css file
  • Why are placeholder selectors inside @keyframes valid .scss?
  • Create a 4x4 responsive grid of squares with a margin of 20px on each side of the container?
  • CSS Not Selector: Select All Except Inside of Element
  • CSS Intellisense for files not in solution
  • Overlapping Anchor Tags When Hovering Over One
  • Any way to keep Susy from changing font-size automatically?
  • In Chrome’s user agent stylesheet, why use "-webkit-margin-before" et al instead of just "margin-top"
  • Responsive slanted border
  • SCSS variables - same name, different value in different media breakpoints
  • How to create overlay over div without defining it in HTML
  • Using negative values fails the execution in SASS
  • up/down arrow key issue with typeahead control (angular bootstrap UI)
  • increase size of search terms in a magento site by applying css class-name
  • Inline elements not collapsing whitespace before the end of the tag, in modern browsers?
  • Avoid outline of button when clicked
  • How to add a repeating png image in the background of a webpage using CSS?
  • Heading text displaying at the center instead of displaying in the statring line in asp.net application
  • Div fixation with his mother
  • Sentence is not taking /n
  • Wordpress mobile devices logo resize
  • Why a div with higher z-index is not visible (covered)?
  • HTML5 How to align a table to center inside a form?
  • Flex-box sticky footer with inner flex-box container with y axis scrolling
  • css3 jagged edge with transparent bg
  • Boostrap glyphicon is outside of text field
  • How to achieve a left and right background split leaving middle div visible?
  • height:auto not working properly, div doesn't expand with content
  • Make a div containing CSS columns have unlimited width
  • Indicate that a LESS file should not be compiled on save
  • CSS hover transition / transform background color scale
  • CSS Aligning Dynamic Div
  • Background color/width running to 100% on css element
  • A CSS animation of a SVG Images 'fill' property not working in Safari
  • Background gradient in border?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org