I'm trying to use clip-path in CSS but it's not working. I've watched plenty tutorials by now and it seems simple, but it's just not working and doesn't appear to be trying to work. I should also mention I'm using React--which, whenever I've run into issues recently, it's caused by React.
To my own knowledge, I've done everything I'm supposed to. The SVG is loaded in the DOM as a clipPath tag, with a unique ID and I reference that ID in the CSS.
Please help. Thanks.
SVG Blob (imported in the DOM via import {ReactComponent as LIST_ICON} from ...:
<svg className="list-icon" viewBox="0 0 64 48">
<path d="M12.343,2V10.343c0,1.104-.896,2-2,2H2c-1.105,0-2-.896-2-2V2C0,.896,.895,0,2,0H10.343c1.104,0,2,.896,2,2Zm-2,15.829H2c-1.105,0-2,.896-2,2v8.343c0,1.104,.895,2,2,2H10.343c1.104,0,2-.896,2-2v-8.343c0-1.104-.896-2-2-2Zm0,17.829H2c-1.105,0-2,.896-2,2v8.343c0,1.105,.895,2,2,2H10.343c1.104,0,2-.895,2-2v-8.343c0-1.104-.896-2-2-2ZM62,0H19.828c-1.104,0-2,.896-2,2V10.343c0,1.104,.896,2,2,2H62c1.104,0,2-.896,2-2V2c0-1.104-.896-2-2-2Zm0,17.829H19.828c-1.104,0-2,.896-2,2v8.343c0,1.104,.896,2,2,2H62c1.104,0,2-.896,2-2v-8.343c0-1.104-.896-2-2-2Zm0,17.829H19.828c-1.104,0-2,.896-2,2v8.343c0,1.105,.896,2,2,2H62c1.104,0,2-.895,2-2v-8.343c0-1.104-.896-2-2-2Z" />
<symbol id="list-icon" viewBox="0 0 64 48">
<path d="M12.343,2V10.343c0,1.104-.896,2-2,2H2c-1.105,0-2-.896-2-2V2C0,.896,.895,0,2,0H10.343c1.104,0,2,.896,2,2Zm-2,15.829H2c-1.105,0-2,.896-2,2v8.343c0,1.104,.895,2,2,2H10.343c1.104,0,2-.896,2-2v-8.343c0-1.104-.896-2-2-2Zm0,17.829H2c-1.105,0-2,.896-2,2v8.343c0,1.105,.895,2,2,2H10.343c1.104,0,2-.895,2-2v-8.343c0-1.104-.896-2-2-2ZM62,0H19.828c-1.104,0-2,.896-2,2V10.343c0,1.104,.896,2,2,2H62c1.104,0,2-.896,2-2V2c0-1.104-.896-2-2-2Zm0,17.829H19.828c-1.104,0-2,.896-2,2v8.343c0,1.104,.896,2,2,2H62c1.104,0,2-.896,2-2v-8.343c0-1.104-.896-2-2-2Zm0,17.829H19.828c-1.104,0-2,.896-2,2v8.343c0,1.105,.896,2,2,2H62c1.104,0,2-.895,2-2v-8.343c0-1.104-.896-2-2-2Z" />
</symbol>
<defs>
<clipPath id="list-icon-clip" clipPathUnits="objectBoundingBox">
<path d="M12.343,2V10.343c0,1.104-.896,2-2,2H2c-1.105,0-2-.896-2-2V2C0,.896,.895,0,2,0H10.343c1.104,0,2,.896,2,2Zm-2,15.829H2c-1.105,0-2,.896-2,2v8.343c0,1.104,.895,2,2,2H10.343c1.104,0,2-.896,2-2v-8.343c0-1.104-.896-2-2-2Zm0,17.829H2c-1.105,0-2,.896-2,2v8.343c0,1.105,.895,2,2,2H10.343c1.104,0,2-.895,2-2v-8.343c0-1.104-.896-2-2-2ZM62,0H19.828c-1.104,0-2,.896-2,2V10.343c0,1.104,.896,2,2,2H62c1.104,0,2-.896,2-2V2c0-1.104-.896-2-2-2Zm0,17.829H19.828c-1.104,0-2,.896-2,2v8.343c0,1.104,.896,2,2,2H62c1.104,0,2-.896,2-2v-8.343c0-1.104-.896-2-2-2Zm0,17.829H19.828c-1.104,0-2,.896-2,2v8.343c0,1.105,.896,2,2,2H62c1.104,0,2-.895,2-2v-8.343c0-1.104-.896-2-2-2Z" />
</clipPath>
</defs>
</svg>
More specifically:
<defs>
<clipPath id="list-icon-clip" clipPathUnits="objectBoundingBox">
<path d="M12.343,2V10.343c0,1.104-.896,2-2,2H2c-1.105,0-2-.896-2-2V2C0,.896,.895,0,2,0H10.343c1.104,0,2,.896,2,2Zm-2,15.829H2c-1.105,0-2,.896-2,2v8.343c0,1.104,.895,2,2,2H10.343c1.104,0,2-.896,2-2v-8.343c0-1.104-.896-2-2-2Zm0,17.829H2c-1.105,0-2,.896-2,2v8.343c0,1.105,.895,2,2,2H10.343c1.104,0,2-.895,2-2v-8.343c0-1.104-.896-2-2-2ZM62,0H19.828c-1.104,0-2,.896-2,2V10.343c0,1.104,.896,2,2,2H62c1.104,0,2-.896,2-2V2c0-1.104-.896-2-2-2Zm0,17.829H19.828c-1.104,0-2,.896-2,2v8.343c0,1.104,.896,2,2,2H62c1.104,0,2-.896,2-2v-8.343c0-1.104-.896-2-2-2Zm0,17.829H19.828c-1.104,0-2,.896-2,2v8.343c0,1.105,.896,2,2,2H62c1.104,0,2-.895,2-2v-8.343c0-1.104-.896-2-2-2Z" />
</clipPath>
</defs>
JSX (HTML):
<button className="hint-cache-toggle" onClick={e => e.preventDefault()}>
CSS:
#answer-input .hint-cache-toggle {
position: absolute;
inset: auto 0 0 auto;
border: none;
width: 64px;
height: 48px;
clip-path: url("#list-icon-clip");
/* -webkit-clip-path: url("#list-icon-clip"); */
background-color: black;
}
I'm trying to change, with CSS, the size and color of an SVG element that's being rendered with <use>. The SVG in question:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path fill="#000000" fill-rule="evenodd" d="<all the actual svg path info>" clip-rule="evenodd"/>
</svg>
I do not have permission to change the contents of the SVG itself.
The way I'm using the SVG:
<svg>
<use xlink:href="#myIcon"></use>
</svg>
I've fought with this for hours, read through a pretty comprehensive article on the subject, and I still haven't had any success. I've tried applying classes to both the use element and the outer svg element, as well as referencing the path element inside. I can't seem to do anything to override the provided styles. How can I change the width, height, and fill color with this arrangement?
For the size it's easy if you correctly set the viewBox and then you adjust the width/height.
For the coloration you can rely on blending mode since the color of the SVG is black.
.icon {
display: inline-block;
background: #fff;
position: relative;
}
.icon::after {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:var(--c);
mix-blend-mode:lighten;
}
.icon>svg {
display: block;
}
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<symbol id="myIcon">
<path fill="#000" d="M81,40.933c0-4.25-3-7.811-6.996-8.673c-0.922-5.312-3.588-10.178-7.623-13.844 c-2.459-2.239-5.326-3.913-8.408-4.981c-0.797-3.676-4.066-6.437-7.979-6.437c-3.908,0-7.184,2.764-7.979,6.442 c-3.078,1.065-5.939,2.741-8.396,4.977c-4.035,3.666-6.701,8.531-7.623,13.844C22.002,33.123,19,36.682,19,40.933 c0,2.617,1.145,4.965,2.957,6.589c0.047,0.195,0.119,0.389,0.225,0.568l26.004,43.873c0.383,0.646,1.072,1.04,1.824,1.04 c0.748,0,1.439-0.395,1.824-1.04L77.82,48.089c0.105-0.179,0.178-0.373,0.225-0.568C79.855,45.897,81,43.549,81,40.933z M49.994,11.235c2.164,0,3.928,1.762,3.928,3.93c0,2.165-1.764,3.929-3.928,3.929s-3.928-1.764-3.928-3.929 C46.066,12.997,47.83,11.235,49.994,11.235z M27.842,36.301c0.014,0,0.027,0,0.031,0c1.086,0,1.998-0.817,2.115-1.907 c0.762-7.592,5.641-13.791,12.303-16.535c1.119,3.184,4.146,5.475,7.703,5.475c3.561,0,6.588-2.293,7.707-5.48 c6.664,2.742,11.547,8.944,12.312,16.54c0.115,1.092,1.037,1.929,2.143,1.907c2.541,0.013,4.604,2.087,4.604,4.631 c0,1.684-0.914,3.148-2.266,3.958H25.508c-1.354-0.809-2.268-2.273-2.268-3.958C23.24,38.389,25.303,36.316,27.842,36.301z M50.01,86.723L27.73,49.13h44.541L50.01,86.723z" fill-rule="evenodd" clip-rule="evenodd"/>
</symbol>
</svg>
<!-- your code -->
<div class="icon" style="--c:red;">
<svg viewBox="0 0 100 125" width="100">
<use xlink:href="#myIcon"></use>
</svg>
</div>
<div class="icon" style="--c:green;">
<svg viewBox="0 0 100 125" width="150">
<use xlink:href="#myIcon"></use>
</svg>
</div>
<div class="icon" style="--c:blue;">
<svg viewBox="0 0 100 125" width="200">
<use xlink:href="#myIcon"></use>
</svg>
</div>
Save svg as a image with svg format then add the color and width or whatever you want to your img then add this to the html file as a img tag and display: none the svg code.
If you can't reach the html code then you can't do anything.
I have created a fairly simple shape using an SVG element which is then put into my CSS using clip-path. It should make the corners rounded for me but for some reason only 1 of the corners does the effect perfectly.
This is the shape:
<svg height="500" width="500">
<path fill="#555555" d="M50,0 L450,0 Q500,0 500,50 L500,400 Q500,450 450,450 L200,450 L175,500 L150,450 L50,450 Q0,450 0,400 L0,50 Q0,0 50,0z" />
</svg>
This is what happens when i use it as a clip-path
body {
background: #555;
}
img {
clip-path: url(#svgPath);
-webkit-clip-path: url(#svgPath);
}
<svg height="0" width="0">
<defs>
<clipPath id="svgPath">
<path fill="#FFFFFF" d="M50,0 L450,0 Q500,0 500,50 L500,400 Q500,450 450,450 L200,450 L175,500 L150,450 L50,450 Q0,450 0,400 L0,50 Q0,0 50,0z" />
</clipPath>
</defs>
</svg>
<img src="https://dummyimage.com/500" />
It seems to work perfectly within FireFox but shows the corners aren't cut correctly in Chrome apart from the bottom right corner.
The default units for the clip-path is userSpaceOnUse and this seems to calculate the coordinates of the path with reference to the root element. This is the reason why the clip-path seems like it is producing an incorrect output. Nullifying the margin and padding on the root element or absolutely positioning the element (like in the below snippet) should solve the issue.
body {
background: #555;
}
img {
position: absolute;
top: 0px;
left: 0px;
clip-path: url(#svgPath);
-webkit-clip-path: url(#svgPath);
}
<svg height="0" width="0">
<defs>
<clipPath id="svgPath">
<path fill="#FFFFFF" d="M50,0 L450,0 Q500,0 500,50 L500,400 Q500,450 450,450 L200,450 L175,500 L150,450 L50,450 Q0,450 0,400 L0,50 Q0,0 50,0z" />
</clipPath>
</defs>
</svg>
<img src="http://lorempixel.com/500/500/" />
However, in a real life scenario the actual element that has to be clipped could be present anywhere within the body and hence I think it is a much better approach to use the objectBoundingBox as the units like in the below snippet:
body {
background: #555;
}
img {
clip-path: url(#svgPath);
-webkit-clip-path: url(#svgPath);
}
<svg height="0" width="0">
<defs>
<clipPath id="svgPath" clipPathUnits="objectBoundingBox">
<path fill="#FFFFFF" d="M0.1,0 L0.9,0 Q1,0 1,0.1 L1,0.8 Q1,0.9 0.9,0.9 L0.4,0.9 L0.35,1 L0.3,0.9 L0.1,0.9 Q0,0.9 0,0.8 L0,0.1 Q0,0 0.1,0z" />
</clipPath>
</defs>
</svg>
<img src="https://dummyimage.com/500" />
As mentioned in the question itself, this behavior is visible only in Chrome and not Firefox for reasons unknown to me. Firefox produces an output similar to the expected one even when (a) extra padding + margin is added to the body and (b) when the image itself is wrapped inside another container which also has padding + margin.
The only case where Firefox's output matches with Chrome is when a padding is added directly to the img tag itself. I believe this happens because padding is part of the element and thus affects the coordinates.