All Questions
Tagged with internet-explorer-11 svg
126
questions
0
votes
0
answers
93
views
IE11 - SVG printing not showing all drawn elements
I'm trying to print my svg on IE, but only half of the svg is printed, the other half is hidden no matter how much width I set for the svg in @media print. Hope someone can help!
Here is the code:
<...
- 731
0
votes
1
answer
171
views
SVG images not being clipped to width of SVG container in IE11
When displaying some SVG icons within an SVG of a fixed width, they should be clipped to the width of that SVG container.
In all sensible browsers this works fine but in IE11 the icons extend beyond ...
- 48
1
vote
0
answers
208
views
SVG breaks into next line in IE11
My problem is that SVGs inside an a-tag with text in IE11 are breaking into the next line despite of me adding "display: inline" to the SVG.
Also adding "display: flex" on the a-...
- 13
1
vote
2
answers
504
views
Find parent "SVG" element in Internet Explorer
var HELPERS = {
getElem: function($this) {
return HELPERS.findAncestor($this, "svg");
},
findAncestor: function (el, sel) {
while ((el = el.parentElement) && !((el.matches || el....
- 11
1
vote
1
answer
55
views
IE11 filter attribute not supported
I tried the below code and noticed in IE11, the second circle did not appear at all. Once I removed the filter="url(#blurMe)" from the second circle tag, I was able to see the green second ...
- 225
0
votes
1
answer
60
views
Why isn't internet explorer displaying my .svg images correctly?
I have an image in my html file:
<img src="../path-to-image/image.svg" class="image-class" />
and some simple css:
.image-class{
height: 80px;
width: 80px;
}
However, instead ...
- 1,472
0
votes
1
answer
77
views
SVG getting distorted in IE
I am trying to embed an svg into a web page. It works fine in Chrome and Firefox but gets completely distorted in IE. Please use the below svg block of code as reference:
<svg width="33" ...
0
votes
2
answers
236
views
Simple SVG project cause error on Internet Explorer 11
I am learning svg and would like to compare displaying svg items on different browsers. My code works fine on firefox, chrome, edge, safari etc, but cannot work on ie11. Unfortunately application I ...
- 1,450
1
vote
1
answer
905
views
cannot apply drop shadow in IE11
how can i show in internet explorer 11 the same shadow that I can apply in chrome using this rule?
filter: drop-shadow(6px 6px 7px rgba(0,0,0,0.5));
This is my working chrome markup HTML
<...
- 417
0
votes
2
answers
289
views
IE11 SVG transform: translate not working
I want to animate a circle
@keyframes animation {
0% {
opacity: 0;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
opacity: 1;
-webkit-...
- 73
0
votes
0
answers
114
views
SVG image not getting updating on E11
I have an accordion opens and close on click of down/up caret button. Works fine on all browsers except E11.
Through JS I am updating SVG's xlink:href attribute on click of caret like
<svg xmlns=...
- 944
1
vote
1
answer
662
views
SVG naturalWidth on IE11
I'm trying to get the naturalWidth property from an SVG image on IE11. I can get the naturalWidth and naturalHeight on Chrome, Firefox, and Safari but on IE11 it always returns 0.
Here is a simple ...
- 6,190
0
votes
1
answer
363
views
CSS: SVGs in data URL not working in IE11
I am doing something like this (in a React app, using styled components):
a {
position: relative;
}
a::after {
content: '';
position: absolute;
bottom: -10px;
display: block;...
- 66
0
votes
1
answer
2k
views
SVG Icons not working in Internet Explorer
In my web application i'm using SVG icons, main reason is dat i'm using than for multi-tenant design. I've tried a lot of options but in Internet Explorer almost every version, it doesn't work. It ...
5
votes
2
answers
5k
views
IE11 - Object doesn't support property or method 'contains'
Working with Rappid I encountered an error in IE11 console:
Object doesn't support property or method 'contains'
This error is from an SVGElement not having that method. Same code in Chrome works.
...
- 785
1
vote
1
answer
1k
views
IE not displaying SVG as content in a pseudo element :before or :after
This problem is a extension of below thread.
Is there a way to use SVG as content in a pseudo element :before or :after.
I am trying to attach a svg triangle after a div using pseudo class.
div{
...
- 707
-1
votes
1
answer
46
views
SVG icon breaks IE11 anchor tags
I have a problem where having an svg inside an a tag breaks a link that works in other browsers. The following code works in IE11:
<span class="login-user-name" *ngIf="isLoggedIn"&...
- 1,188
0
votes
2
answers
3k
views
Custom HTML Embedded SVG animation not working in IE 11?
I am using webflow and embedded a custom HTML SVG animation into the background of the page. Works great in everything but internet explorer 11. How can I fix this so that it works across all browsers?...
0
votes
1
answer
574
views
"Unhandled promise rejection TypeMismatchError" in internet explorer 11
I am using a port for javascript bases on potrace: https://github.com/kilobtye/potrace
this library converts images to svg
Everything works except for(ofcourse...) internet explorer 11.
i get the ...
- 11
0
votes
0
answers
288
views
IE 11 find on this page not working for embedded SVG
Problem: Search on SVG file is failing in IE 11 when embedded inside an HTML file.
Explanation: Below is the sample code where I am embedding an SVG file in an HTML file using <object> tag
e.g....
- 762
1
vote
1
answer
312
views
d3 svg drawing rect bar chart not work in IE11
I'm finish a dynamic bar chart using d3, it's perfect work in google chrome.
However, it's not work in IE11.
here is my code
The problems are:
only work on drawing the background table, but the ...
- 73
2
votes
1
answer
1k
views
Internet Explorer not recognizing CSS for SVG elements
I have an SVG image map with hover styles on the links.
(More on SVG image maps here.)
All respectable browsers I've tested on are displaying it correctly.
IE is not having any of it (surprise!)...
...
- 1,657
1
vote
0
answers
207
views
IE and Edge ignore absolute position of svg [duplicate]
After this question being marked as a duplicate of SVGs not scaling properly in IE - has extra space I think this is a separate issue, though part of the solution is similar. I did some more digging ...
- 55
0
votes
1
answer
140
views
Rotate <text> not working in ie11 IE11 on Windows 10
I draw svg use d3 js use transform:rotate(180deg). It's perfect show on chrome but when ie11 it not woking. I'm change to rotateY(180deg) it woking with div element but still not working with text ...
- 101
1
vote
1
answer
2k
views
transform-origin in IE
Does anyone know how to use transform-origin in IE11?
I'm trying to rotate a group in svg using D3js.
This seems to work for Chrome, but not IE.
wheel.style('transform-origin', '50%, 50%')
...
- 81
0
votes
1
answer
358
views
SVG element doesn't appear in IE 11?
I have a trouble with IE, of course. The SVG element doesn't appear in browser. Can someone help me?
This is my code
svg(preservAspectRatio='none', length='rem(250px)', height='1px', viewbox='0 0 ...
2
votes
1
answer
2k
views
SVG data URI in IMG tag isn't showing on IE11
I'm letting the user upload an SVG image, and I'm trying to show it to him.
The image is showing nicely on Edge, Firefox and Chrome but not on IE11.
When I'm entering debug mode, it looks like the ...
- 91
0
votes
0
answers
296
views
Fixing SVG Fragment Sprite Slow Loading in Edge (Fine in Chrome, FF, Safari)
We have recently switched to SVG for our decorative images and logos. We do this in the form of a single SVG file containing multiple SVG sections for each image. We hide all SVG sections and only ...
- 463
1
vote
2
answers
418
views
Responsive SVGs on InternetExplorer with SVG injection
To make SVGs responsive on our website with Internet Explorer 11 I am using the "Canvas Hack" by Nicholas Gallagher. This hack uses an extra canvas element to make use the SVG keeps the aspect ratio. ...
- 190
0
votes
1
answer
325
views
CSS/SVG background image IE11 alignment problem
Hoping somebody can help me with an alignment issue - I can't figure out whether it's a problem with the CSS or SVG.
I'm trying to replace the default "Play" button in a (HTML based) Brightcove video ...
- 18
0
votes
1
answer
291
views
Internet Explorer 11 - Dynamic SVG creation [duplicate]
I need to create a JavaScript Framework to build a FlowChart inside the browser.
To manipulate the DOM I use mostly follow function insertAdjacentHTML.
Now I try my current implementation in ...
- 89
0
votes
1
answer
943
views
Javascript function won't build an SVG on IE11
I'm creating Google Analytic like graphs using SVGs to plot the data along points. I've sourced a function that will accept an array of points and build them into a path element which is inserted ...
- 117
-1
votes
1
answer
497
views
Why is IE11 and Edge incorrectly rendering animation with Font Awesome icons?
I'm using the latest Font Awesome to place SVG images as icons in my navigation bar. They are supposed to remain hidden until you hover on the navigation item, at which point the text slides over and ...
- 587
0
votes
0
answers
76
views
ReactJS : Using VX library with IE11?
I try to create an app with SharePoint Framework width ReatcJS and some svg. I use some element of the VX library (text and responsive) (d3.js for react). They work fine with Firefox but they don't ...
0
votes
1
answer
157
views
Internet Explorer 11 and up: toggles on click interactivity in pure SVG?
Is it possible, when working with pure SVG (no Javascript et cetera), to have a user, on Internet Explorer 11 and up (without any further browser plug-ins) click on one part of an SVG, and to thus ...
- 491
0
votes
0
answers
83
views
SVG Repeating twice in IE 11,Works Fine in Chrome
This seems to be browser compatibility issue.I am using SVG in my component.Works Fine in Chrome.
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15">
<path d="M10 8.6l7.8-7....
0
votes
1
answer
43
views
IE11 defaults SVG to 100% width - how to refactor this code?
I am not aware of alternatives to adding width: 1em to the SVG in order to fix the IE11 issue (please see comment in the code). Play with the code in the codepen. Appreciate any help! Thanks :)
https:...
- 107
3
votes
2
answers
3k
views
SVG inside link not clickable in IE11 when pointer-events set to None
I have an HTML/CSS file similar to this.
.window{
position: absolute;
width: 150px;
height: 100px;
background-color: #424242
}
svg{
pointer-events: none;
}
.b{
height: ...
- 1,436
3
votes
1
answer
452
views
Base64 svg on ie11 not rendering when resized
I have a particular svg file encoded in base64 that I'm trying to display with an img tag.
My problem is; for this particular svg only the image is not rendered when resized on internet explorer only
...
- 560
1
vote
0
answers
4k
views
SVG: Append Title to selfclosing Path concludes with invalid XML in IE11
I encountered a new problem since the latest update of IE11 (11.309.16299.0), which I am able to demonstrate with the following snippet:
var tE = document.createElement("div");
tE.innerHTML = "<...
- 3,678
5
votes
2
answers
3k
views
Centering SVG text on IE11 with text-anchor: middle and alignment-baseline: middle / central
I need to perfectly center a text element in an SVG using IE11.
Desired result (all Evergreen browsers):
IE11 result:
// SVG CODE:
<svg xmlns="http://www.w3.org/2000/svg" width=100% height="100%...
- 1,488
1
vote
1
answer
739
views
SVG - Circle marker not the same size in all browsers (IE11)
I tried adding a small circle marker at the end of the <path> element but noticed its size is different in IE11, but Chrome, Firefox, Edge have the "correct" size. Example: Codepen (Updated in ...
- 125
1
vote
0
answers
76
views
Make grayscale on layer NOT <img/> in IE11
How to make equivalent of
.anyClass
{
filter:grayscale(100%);
}
in IE11 for elements other than <img/>?
The code doesn't have to work in IE10 and earlier and other browsers.
I googled ...
- 2,070
1
vote
1
answer
989
views
Vue.js rendering of SVG fragment fails in IE11
I need to fetch a lot of SVG documents from AWS and I use vue.js to render the content of the SVG. This works fine in Chrome, Firefox, Edge and Safari but fails without errors in IE11.
I have created ...
- 11k
1
vote
0
answers
35
views
SASS inadvertently unencdoding URL-Strings
I'm using SASS in an Angular CLI project, trying to use a URL-Encoded SVG with some style information as a background image.
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/...
- 4,275
3
votes
0
answers
2k
views
svg drop-shadow on Internet Explorer 11 [duplicate]
I have a drop-shadow filter applied to an svg object on my page. I apply the drop-shadow using some inline styling on the element
<style>
.historicUploadDonuts {
filter: drop-shadow(...
- 2,501
2
votes
1
answer
6k
views
100% inline svg width not working in IE11 [duplicate]
I have a basic inline svg setup
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.51 25.51">
<rect id="a1" x="0.5" y="0.5" width="25.51" height="25.51"/>
</svg>
JSFIDDLE
...
- 28.3k
0
votes
1
answer
161
views
D3 Zoomable Circle Packing in IE11 is expanding beyond the SVG boundary
Try Mike's original sample in raw mode in IE11:
https://bl.ocks.org/mbostock/raw/7607535/
The expanded circle is bleeding out of the SVG area.
Anyone have any idea how to fix this browser specific ...
- 232
1
vote
0
answers
216
views
Fabric.js text missing in SVG export in IE 11+
As can be seen on the fabric.js site itself.
Text in an exported SVG will not show up in the SVG in IE11.
I'm wondering if this is a known issue, or if anyone has faced &/ fixed it :)
I can't ...
- 1,568
1
vote
1
answer
1k
views
Angular: binding to xlink:href does not update SVG in IE11
I have an Angular 4 app displaying an SVG. The SVG is dynamic and depends on the model. This is achieved by biding to the use xlink:href attribute:
<svg class="svg-icon">
<use [attr.xlink:...
- 5,692