1

I have an embedded SVG in an HTML page. Everything works fine, but not with Firefox...
I've read that Firefox is quite rigorous interpreting SVGs so I tried a lot of things in order to make my SVG perfect. But according to Firefox that is not enough...
This is a part of it, without all the path (and before a try things on it):

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="320" height="86" viewBox="0 0 320 86">
    <defs>
        <style type="text/css">
            .cls-1 {
                fill: transparent;
                fill-rule: evenodd;
                stroke: #fff;
                stroke-width: 6px;
            }
        </style>
        <clipPath id="clip">
            <use xlink:href="#cls-1-path"/>
        </clipPath>
    </defs>
    <path d="M319.604,36.098 C319.409,...5.551 103.736,5.687 103.192,5.881 Z" class="cls-1" id="cls-1-path" clip-path="url(#clip)"/>
</svg>


Do you have any idea about what I should do ?

Thank you :)

1 Answer 1

2

Well, it's not that there isn't anything at all. You just chose a fill: transparent; with a #fff white stroke on a #ffffff background.

White on white appears invisible :-)

Maybe FireFox does interpret the #fff differently than other browsers - as #FFFFFF and not as #FFF000.

For completeness, I attach my (minimally modified) test case:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="320" height="86" viewBox="0 0 320 86">
    <defs>
        <style type="text/css">
            .cls-1 {
                fill: transparent;
                fill-rule: evenodd;
                stroke: #fff444;
                stroke-width: 6px;
            }
        </style>
        <path id="cls-1-path" d = "M 0 0 L 550 230 L 160 0"/>
        <clipPath id="clip">
            <use xlink:href="#cls-1-path"/>
        </clipPath>
    </defs>
    <path d="M319.604,36.098 C319.409, 5.551 103.736,5.687 103.192,5.881 Z" class="cls-1" id="cls-1-path" clip-path="url(#clip)"/>
</svg>
2
  • But my background isn't white :/ Commented May 16, 2016 at 22:48
  • @krawitz: Have you tried my test case from above? All I did was changing the stroke color and adding the path <path id="cls-1-path" d = "M 0 0 L 550 230 L 160 0"/> so that it's not empty.
    – zx485
    Commented May 19, 2016 at 10:12

Not the answer you're looking for? Browse other questions tagged or ask your own question.