SVG images / internet explorer uncompatible when using a JavaScript slideshow - javascript

I am trying to use SVG icons and even though they work fine in Chrome, they don't in Internet Explorer.
I've added it to codepen
<svg style="" id="pdf-file" height="18" width="18" class="pdf-file">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fa-file-pdf-o"></use>
</svg>
Open in Chrome and you will be able to see some small icons on the top left corner, but nothing is displayed if you open in Internet Explorer, any idea why/how to fix?

Related

correct behaviour for viewbox attribute in SVG

Consider the following code
<div style="width:480px;border:1px solid red">
<svg viewBox="0 0 100 100">
<path style="stroke:#000" d="M 0 0 100 100" />
</svg>
</div>
As we can see, the line is fully stretched to container. This is expected as per my understanding on viewBox. (in Firefox/Chrome/Edge/Opera)
However, IE11 or below does not strech the line to container. This is because IE11 expect a specific height to SVG.
I do not really care about IE11 support. I am just wondering, whether all modern browsers are consistent in handling svg aspect ratio in the same way firefox/chrome/edge/opera handles it as I showed in first code snippet.
Note: I am not looking for a working around in IE, that is already available in many stackoverlow answers. I just wanted to ensure that, not setting explicit height for my svg does not cause issues in modern browsers

d3.drag & d3.zoom not fired in chrome, but work in FireFox [duplicate]

I'm trying to position a svg rectangle with transfrom=translate().
When I tested it, I saw that it doesn't work in Chrome but works nice in Firefox.
I also tried in Chrome with -webkit- but doesn't work either.
In the code snippet you can see whats the problem when its open with Chrome.
Does anyone now a workaround for this or am I doing something wrong?
<svg transform="translate(100,0)">
<rect width="200" height="200" style="fill:blue;;stroke:black" />
</svg>
<br><br>
<svg style="transform:translate(100px,0)">
<rect width="200" height="200" style="fill:blue;;stroke:black" />
</svg>
https://jsfiddle.net/suf2reee/
I think this is a SVG 1.1 vs SVG 2 issue. In SVG 1.1, which is the version that browsers generally support, the transform attribute was not valid for the <svg> element. It is allowed in SVG 2.
Firefox have started implementing some SVG 2 features, whereas Chrome is not so far along.
The simplest solution is just to put your transform on the <rect>.

Scaling an embedded <image> inside <svg> in IE 11+

Before I give up and build my solution completely in SVG, I thought I would throw this out to the StackOverflow crowd to see if I missed anything.
In a current project, I have a .png that represents the faceplate of a real-world water irrigation controller. The SVG acts an overlay and contains the coordinates of all the pressable buttons and virtual LEDs that blink when necessary on the real world device, interacting with a Node application that is talking to the 'real' water controller, and the .png is an embedded background image. (see code below) We programmatically (via Javascript) change the overlay SVG and the faceplate image on entry into the page, depending on earlier user input.
Everything works great, we can press buttons on the SVG overlay and the real world controller responds, and vice-versa.
The problem comes down to scaling the embedded image. Under Chrome, Firefox, and Opera, I can resize the browser window to various sizes and the SVG and embedded image scale beautifully.
But IE 11+ refuses to play ball, and stubbornly keeps the embedded image at a reduced size.
I think I've googled-to-death everything on the subject of scaling SVGs in IE, and tried various CSS hacks and DOM manipulations, although most seem to apply to embedding the SVG in an HTML img tag, and not an SVG with an embedded image tag.
I've tried removing all width/height from the SVG and use CSS-only; I've tried using 100% width/height in the image tag to (supposedly) allow the viewBox to control it's dimensions; I've tried fixing the width/height to same values of viewBox; I've tried using preseveAspectRatio in both the SVG header and the image. I'm running out of ideas.
Relevant code sample:
<svg class="scaling-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 970 530" preserveAspectRatio="xMidYMid meet" >
<image id="faceplate" xlink:href="../images/TWC-front.jpg" class="svg-content" height="530" width="970" preserveAspectRatio="xMidYMid meet"></image>
<g>
<rect id="rect_textDisplay" x="322" y="157" width="530" height="52" opacity="0" />
<text fill="black" x="326" y="176" id="displine1" xml:space="preserve">Welcome to the Virtual Controller</text>
<text fill="black" x="326" y="198" id="displine2" xml:space="preserve"> ... waiting for connection</text>
</g>
<rect id="dial_irroff" x="39" y="319" opacity="0" width="75" height="25" />
<rect id="dial_manual" x="63" y="287" opacity="0" width="80" height="25" />
<rect id="dial_auto" x="148" y="278" opacity="0" width="50" height="25" />
...
Any ideas or prodding in a direction I might not have considered are greatly appreciated. I would like to keep the solution in the current form as much as possible, because we dynamically change the faceplate depending on user input, and there are about 15 different faceplates to be used between two SVG overlays. It would take quite a bit more time to re-build each faceplate in pure SVG. But I am prepared to do it, if necessary. :(
User llobet's comment above of adding 100% height to the html, body and svg elements seemed to do the trick. Initially I took what worked in the codepen that user Mardoxx asked for and applied it to my CSS and it still did not work. After a few minutes of pruning out all but the most basic of CSS rules and discovered a couple of height: auto;, attributes and removed them or made them 100%, then IE11 started playing nice and scaling as expected. It pays to weed out and scruntinize your CSS until things behave as expected. Thanks to both of you for pushing in the right direction.
Relevant codepen.io: http://codepen.io/digitalmouse/pen/LygOWe

HTML5 ellipses render incorrectly with really large stroke width

My situation is pretty simple. If you draw a small ellipse, with a really large stroke width then the browser renders the ellipse with a weird 'cat eye' effect.
I have a jsfiddle here: http://jsfiddle.net/MyBsC/4/
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="80" cy="80" rx="8" ry="10" style="fill:yellow;stroke:purple;stroke-width:50"/>
</svg>
If you play around with the fiddle and make the ellipse larger, the effect goes away. It happens both with SVG ellipses and with ellipses drawn inside a canvas.
I have observed this behaviour on Firefox 21.0, Chrome 26, and Safari 5.1.7 on Mac OSX Lion
Does anyone know why this happens? Is this a bug with the browsers? Or is there a CSS property I am missing?

SVG to image on a client side for IE

I have a collection of svg files which are going to be used on my site. There is no any problem in modern browsers with showing SVG but we have if we're talking about IE. Is there any way to make IE shows SVG picture? Maybe some jquery/js plugin could do that?
<img src="images/icon.svg" width="32" height="32" alt="" />
I spent a lot of time and still havent found any workarounds :(

Categories

Resources