IE doesn't show SVG - html

the IE doesn't show SVG images on my website.
The first image that isn't shown is a logo image which is put via :before content in front of a Logofont.
the css code is the following:
.logo-svg:before {
content: url('images/logo.svg');
}
.logo-svg {
height: 1.6em;
width: 1.6em;
display: inline-block;
margin-right: 0.2em;
position: relative;
top: 0.2em;
}
Then a few images, that are background images for icons are not shown too, the CSS is here:
.author-link-posts {
background-image: url("/images/icons/svg/archive.svg") !important
}
Has somebody an idea why the IE doesn't show the SVG or maybe a workaround or something like this?
Regards,
Markus

SVG is not supported in IE8 and below. Is this issue happened in all other browsers? Also you can use modernizr as a fallback.
Basically Modernizr will add a "no-svg" class in tag.

The solution are the paths. I had to put the slash before the path, so it works in the IE.

Related

Why does a large border-radius value cause chrome to hide the image?

I have a 128px image with a border-radius to make it appear rounded (I'm actually using the .is-rounded class from Bulma to do this). This is the resulting CSS on the image:
.image img.is-rounded {
border-radius: 9999px;
}
This works in Firefox but in Chrome, the image is hidden.
If I change it to the following, it works:
.image img.is-rounded {
border-radius: 63px;
}
But anything beyond 63px, the image is hidden again:
.image img.is-rounded {
border-radius: 64px;
}
You can see this on my personal website here: https://dominick.cc/
Chrome 110.0:
Firefox:
I updated Chrome to 110.0.5481.100 and it seemed to resolve it. Weird!

Firefox Can't Recognize Background Image of Checkbox

I've placed an image as the background for a checkbox. Everything works fine in chrome but when I use Firefox 32.0.3 firefox does not recognize the background image. Is there something I'm missing that's causing firefox to not add in the background image?
CSS
input[type=checkbox]:before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
background-image: url('http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg');
background-size: 12px;
top: 2px;
position: absolute;
opacity:0.4;
}
HTML
<input type="checkbox" id="chk1" />
Fiddle here.
I solved this by going through a different approach. I created a span tag and with AngularJS (already in my app) I used a ng-class to display the background image to the span tag based on if the checkbox was marked or not.

How to make text clip inside navbar?

I am trying to make a website and i want to clip(mask) text from navbar. The text becomes like a hole in the navbar and background image is seen through it. How to do this?
JSFIDDLE
//css code
text{
background-image: inherit;
color: transparent;
font-size: 20px;
top: 0px;
position: relative;
margin-top: 10px;
padding: 0px;
}
There's a CSS property called background-clip that seems to do do what you're looking for. It's is unfortunatly not supported before IE9 (but works on other main broswers : Chrome, FF, Opera, Safari).
Depending on the importance of this implementation you can always have a different rendering for older IE versions and use background-clip in any other context.
See this Fiddle and comment to tell me if it's what you were looking for!
EDIT : I misunderstood the initial request. I'll try to find a suitable solution for the actual question! Sorry about that.

Can the shape of the clickable area of an HTML anchor tag be changed?

I've been working on a site with a large circular logo in the header. The logo is an anchor tag set up as follows:
<a id="siteLogo" href="#" shape="circle" coords="157,155,147"><i>Site Logo</i></a>
Relevant CSS follows:
i {
visibility: hidden; }
#siteLogo {
background-image: url(../imgs/sprites_main2.png);
background-position: 1000px 1000px;
background-repeat: no-repeat;
border: none;
border-radius: 100%;
display: block;
height: 294px;
left: 10px;
position: relative;
top: 8px;
width: 294px; }
#siteLogo:hover {
background-position: -15px -324px; }
Setting the shape and coords attributes on the anchor tag will give me a link with a circular clickable (opposed to the normal square) area in Opera and Firefox. Chrome, Safari, and IE do not support theses attributes on anchor tags. I did some checking and it seems that HTML5 also does not support these attributes (correct me if I am wrong).
The question I pose to the community is simple. Is there anyway I can achieve a similar result as above that is HTML5 compliant and supported by the major browsers (I can live without IE support) without using an image map or adding any image tags to my HTML?
Javascript or jQuery solutions are acceptable.
I would suggest using padding property to increase the size of clickable area..
This may be a little late, but you can use a <div>, etc, with rounded corners. E.g.
<div style="border-radius:50px; border:1px solid black;
width:100px; height:100px;"
onclick="merry_go()">Stuff goes here</div>
gets you a 100px circle.

Using SVG as CSS3 background-image with scaling

When I use SVG in background property like this:
.svg-button {
-webkit-transform: scale(3.0) // root of the problem!
background: url(Button.svg) no-repeat;
width: 32px;
height: 32px;
}
I get blurred image as result. At the same time text in tag with this style is clear. Also if I scale page by using CTRL++ (browser zoom) instead transform property everything is clear.
If I replace CSS background property on:
<object type="image/svg+xml" data="Button.svg" width="32" height="32"></object>
the image is clear in any scale in any case.
Where is the problem?
Sample on jsfiddle
Update:
I found some more information about this problem:
StackOverflow question
Bug ticket for Chrome (I tried my test under Safari/Chrome/IE9/10 and behaviour is the same.
I was "playing" with this a while back and noticed this for fonts too. Although it seems to be fixed now (for the fonts at least).
As far as I understand the inner workings, the contents of the scaled element are mapped to a texture, which in turn is scaled.
As a workaround, try using a 3d translation and move the element on the z-axis to achieve the size change. This won't yield as much control over the final outcome though.
.svg-button {
-webkit-transform: perspective(800px) translateZ(-300px);
background: url(Button.svg) no-repeat;
width: 32px;
height: 32px;
}
For Chrome/Safari IE9/10 I have decided to use CSS zoom property instead scale property.
.svg-button {
zoom: 300%;
background: url(Button.svg) no-repeat;
width: 32px;
height: 32px;
}
For Firefox I still use CSS scale property because Firefox doesn't support zoom property. At the same time Firefox scales SVG background well. See result.
For IE9 I have written javascript which temporary modifies CSS width property and after small delay returns it back. In this way I force redraw CSS background.