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.
Related
What does it mean when there is "faint text" in the Firefox dev tools inspector, like the .tab-pane divs in the .project_tab_content area:
This corresponds to some Bootstrap stuff that is working everywhere except Firefox, so I'm a little suspicious... Thanks!
Faded elements mean they are not visible. This can be due to some CSS like display: none or their dimensions being 0x0. See also the hint at MDN regarding this.
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.
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"
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.
I have been trying to play a bit with the CSS3 and build a Netscape logo purely out of CSS3 for training.
Here is the link:
http://alonbt.com/css3/netscape/
The thing is: In Firefox all looks well, but in Chrome something goes wrong. I assume this is the overflow:hidden I have - in Firefox it works but Chrome doesn't seem to render it well.
Any suggestions bout what might be the problem?
I've detailed this issue here: http://tech.bluesmoon.info/2011/04/overflowhidden-border-radius-and.html
In particular, you're being hit by https://bugs.webkit.org/show_bug.cgi?id=50072
The issue shows up in Safari too.
You can workaround this problem if you don't use relative positioning. Try getting rid of the 'position: absolute' CSS property and use negative margins instead (e.g. in your case, something like: 'margin: -204px 0 0 -475px;').
Pay attention however that you'll have to compensate somehow on item ordering (you no longer have control over z-index but you need it).
I had the same problem in Chrome on a Windows computer, a img in a div, with overflow:hidden on the div. On a Mac everything showed fine, but Windows Chrome ignored the overflow:hidden. My solution: -webkit-transform:scale(1); on the img (the child).