IE 11 :after background size not working - css

I added a background-image inside the pseudo :after
::after {
content: '';
display: block;
position: absolute;
right: -2.5rem;
bottom: -1.5rem;
height: 9.5rem;
width: 9.5rem;
background-image: url('../img/icons/icon_logo.svg');
background-repeat: no-repeat;
// background-size: 100% auto;
background-size: cover;
}
But the image is way bigger than the actual size of the box.
Any idea how to solve this?
(Working fine in webkit browsers)
!!!Additional Information:
I tried other svg and it works great.
Works:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
<path fill="#FF6C00" d="M0 0h64v64H0z"/>
<path fill="#FFF" d="M33 0C22 0 13 9 ..."/>
</svg>
Does not work:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
<path fill="#FFF" d="M0 0h64v64H0z"/>
<defs>
<path id="a" d="M0 0h64v64H0z"/>
</defs>
<clipPath id="b">
<use xlink:href="#a" overflow="visible"/>
</clipPath>
<path fill="#277052" d="M43.7 51.8s-...."/>
<defs>
<path id="c" d="M0 0h64v64H0z"/>
</defs>
<clipPath id="d">
<use xlink:href="#c" overflow="visible"/>
</clipPath>
<path fill="#EE7203" d="M40.7 28.7c0 4.8-3..." clip-path="url(#d)"/>
<path fill="#1D1D1B" d="M43 10.9c.2.1.4 0..." clip-path="url(#d)"/>
</svg>

Read this link
Adobe Illustrator give me four options to declaring style sheet properties when saving graphics as an SVG file
Presentation Attributes
Style Attributes
Style Attributes (Entity Reference)
Style Elements
No problem using the first three ways to styling properties, but embedding style sheets into SVG content inside a element cause the problem!

I had similar issues rendering CSS in IE.
My solution:
Make sure you have a <!DOCTYPE> declaration before your html
Add the meta tag <meta http-equiv="X-UA-Compatible" content="IE=edge" > (this makes sure that your code always renders the cutting edge or most updated version of internet explorer; else, it can render from older versions and things get really messy.)
I hope that helps.

Try adding in display:block to the css.

Related

Clip-path is not working. Did I miss something?

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;
}

Any way to use SVG Sprite from CSS?

HTML:
<svg>
<use xlink:href="/assets/images/icons-sprite.svg#icon-name"></use>
</svg>
SVG sprite:
<svg width="0" height="0" class="hidden">
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="icon-name">
<path ... fill="currentColor"></path>
</symbol>
</svg>
Is there any way to use SVG sprite from CSS
Like this
<div class=“icon”></div>
.icon {
background-image: “/assets/images/icons-sprite.svg#icon-name”
height: 30px
}
I’m using the technique for including SVGs described here whereby you create a doc that looks something like this…
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="arrow-left" viewBox="0 0 10 16">
<path d="M9.4 1.4L8 0 0 8l8 8 1.4-1.4L2.8 8z"/>
</symbol>
<symbol id="arrow-right" viewBox="0 0 10 16">
<path d="M0 14.6L1.4 16l8-8-8-8L0 1.4 6.6 8z"/>
</symbol>
</svg>
Include it in the top of your HTML and then insert the SVG icons in your markup like this…
<svg class="arrow-right">
<use xlink:href="#arrow-right" />
</svg>
It’s easy and works great. However, I’m trying to use the same icons in my CSS pseudo classes :before and :after using an empty content attribute and the SVG in the background. Something like this…
.title:after {
float: right;
width: 16px;
height: 10px;
content: "";
background: url('#arrow-right');
}

SVG styling problems with <use>

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.

Viewbox placement in referencing SVG symbols and CSS dimensions

I edited my initial cry of despair into something more to the technical point, in order to turn it into a Q&A.
I'm using SVG symbols that I reference in the document with use elements. I'm styling these with CSS. I don't want to set both height and width in the CSS, I want to set only one of them with the other one scaling accordingly.
I do set a viewBox attribute on the symbol. But the graphic does not scale correctly.
<!DOCTYPE html>
<html>
<head>
<title>SVG Symbols</title>
<style>
body { margin: 20px; }
.svg-large { width: 500px; fill: yellow;}
</style>
</head>
<body>
<svg style="display:none;">
<symbol id="scary-smiley" viewBox="0 0 20 20">
<circle cx="10" cy="10" r="9.5" stroke-width="1"
stroke="black" />
<circle cx="6" cy="7" r="1.5" fill="black"/>
<circle cx="14" cy="7" r="1.5" fill="black"/>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Teeth_by_David_Shankbone.jpg/320px-Teeth_by_David_Shankbone.jpg"
width="10" height="5.2" x="5" y="11"/>
</symbol>
</svg>
<svg class="svg-large">
<use xlink:href="#scary-smiley"/>
</svg>
</body>
</html>
The code below has been tested in current Firefox, Chrome and a Webkit-based browser named Midori.
For some reason, defining the viewBox on the symbol element does not have the full desired effect in Firefox and Chrome. It does have some effect, though, as it makes the element scaleable. So, if you want set both width and height in CSS, you can do that.
If the viewBox element is specified only on the symbol and you set only one of width or height, then in Firefox and Chrome the other dimension is set according the default object size in HTML 5 whis is 300x150 px. So, in the example in the question, you get a 500x150 px element and the graphic is scaled to fit that rectangle.
If you want to define only one width or height with the other one scaling accordingly, then defining viewBox on the referencing SVG element works:
<!DOCTYPE html>
<html>
<head>
<title>SVG Symbols</title>
<style>
body { margin: 20px; }
.svg-large { width: 500px; fill: yellow;}
</style>
</head>
<body xmlns:xlink="http://www.w3.org/1999/xlink">
<svg style="display:none;">
<symbol id="scary-smiley">
<circle cx="10" cy="10" r="9.5" stroke-width="1"
stroke="black" />
<circle cx="6" cy="7" r="1.5" fill="black"/>
<circle cx="14" cy="7" r="1.5" fill="black"/>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Teeth_by_David_Shankbone.jpg/320px-Teeth_by_David_Shankbone.jpg"
width="10" height="5.2" x="5" y="11"/>
</symbol>
</svg>
<svg class="svg-large" viewBox="0 0 20 20">
<use xlink:href="#scary-smiley"/>
</svg>
</body>
</html>
Firefox' and Chrome's behaviour is standard compliant, according to the SVG 2 specification, according to which the <svg><use .../></svg> clause establishes a new SVG viewport.

CSS Clip-path positioning issues

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.

Resources