I have a problem with SVG renderring in Firefox. Whilst it works in Safari, Chrome or even in IE, it doesn't work in Firefox. Inspecting the element it seems that the layers are there, but only background is visible as if it's z-index is higher than the z-index of the others.
Rendered in Firefox:
SVG logo in Firefox
Link to the original source file: SVG File
Thanks for your help.
PS: I used Sketch 3 to export the svg. If it helps somehow.
You're experiencing bug 995813.
I fixed this bug some time ago but that change is still making its way through the release process so your example will display correctly from Firefox 31 onwards which will be released on 22 July 2014.
In the meantime if you move the fill="white" from the <mask> element to the child <use> element this will work around the Firefox bug.
Related
I have a Google Chrome problem on macOS Sierra: Image: SVG rendering bug
As you can see in the image above, the SVG background images in the stackoverflow answering section are not rendered correctly. That also applies for the stackoverflow logo and for any other SVG background images.
I solved the problem temporary by deinstall and install Chrome again. The next day I had the same problem. Chrome is up to date on version 56.0.2924.87 (64-bit).
I also have the issue that if I hover over an DOM element in the 'Elements' tab in dev-tools, the element is not highlighted on the page. This was also gone after reinstalling but also appeared the next day again.
Any ideas about these issues?
I recently had problems with displaying SVG files in Firefox, but I overcame that by explicitly stating the width and height in the .svg file source. That fixed the problem for me on my Firefox, but some users still report problems on some versions. Are you able to reproduce the problem? What might be the solution? This is the website: http://naratifrevue.cz – it's using a glitch script on SVG images in the header.
I am using Chrome on OSX and have encountered an infuriating bug which makes JSFiddle unusable:
As the screenshot shows the CSS and Result text areas are squeezed off the screen with no handle to pull them back. How can I make them visible and usable?
It hasn't always rendered like this, but I'm not sure what has caused it.
What I've tried
Disabling all chrome extensions
Resizing the browser to a ridiculous width
Clearing local, session and cookie storage for JSFiddle on Chrome
Removing secondary screens
Changing my screen resolution
None of which have changed anything.
Update
The bug is not replicated when using safari.
Good afternoon,
I'm creating a SVG-based program and I'm having cross-browser problems with SVG textpath when opening with safari and mac-firefox. It works great with chrome, windows-firefox and IE.
take a look here:
http://codware.com/test.svg
screenshots:
Good:
http://codware.com/chrome-svg.png
Bad:
http://codware.com/mac-firefox-svg.png
http://codware.com/safari-svg.png
Any ideas? Thanks
The firefox issue was Fixed changing the initial PATH to a curve, it don't work with a rect path
The Safari issue remains, that can be checked here:
http://codware.com/logochrome/
1- Click at "Earth"
2- At sidebar click at "Curved Text"
Consider the following snippet of code:
<text style="text-decoration:underline;"> Underline </text>
It renders properly for me in both the latest version of Chrome & Safari; however, it fails in the latest version of Firefox.
Question:
if text-decoration not part of the SVG standard?
or
does Firefox not support the entirety of SVG?
and lastly:
how do I get underline / strike through / over line in firefox SVG text given the above?
Thanks!
EDIT
Hmm, does https://bugzilla.mozilla.org/show_bug.cgi?id=317196 confirm that Firefox, in 2012, does not support SVG underline? :-)
The bug you linked to is it.
And no one supports "the entirety of SVG" (at least of SVG 1.1). Chances are, no one ever will.