Good day. I am working on an interactive SVG card for a small project, and I am faced with the problem of cross-browser compatibility.

After some time analyzing the problem, I found its source and wrote an analog with the same problem. Here is his code:

<svg version = "1.1" baseProfile="full" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" width="400" height="400"> <style><![CDATA[ #elems g use { fill: white; } #elems g use.minus { fill: gray; } ]]></style> <defs> <g id="rects"> <rect id="r1" x="25" y="25" width="350" height="150" /> <rect id="r2" x="25" y="200" width="350" height="175" /> <rect id="r3" x="50" y="225" width="300" height="125" /> </g> <g id="elems"> <g id="e1"> <use xlink:href="#r1" /> </g> <g id="e2"> <use xlink:href="#r2" /> <use xlink:href="#r3" class="minus" /> </g> </g> <g id="main"> <use xlink:href="#e1" /> <use xlink:href="#e2" /> </g> </defs> <rect x="0" y="0" width="500" height="500" fill="gray" /> <use xlink:href="#main" />

Same example in JSFiddle . Screenshot of the result in the attached image.

SVG definitions are divided into parts:

  • g#rects stores the simplest forms of active regions ( <path> used in the original, but the problem does not depend on this.
  • g#elems stores information about the areas to be used with <use> . Basically, these are simple forms (with one <use> ), but there are also some complex ones. So, the example shows a case when you need to "subtract" one area from another.
  • in g#main elements from g#elems simply copied. In the original design, instead, a mask is used that overlaps the original image and highlights the active area.

As a result, in Chrome and IE, the correct mask is obtained, but for some reason, the fill in Firefox does not occur. To paint the whole area instead of individual parts is not an option, because sometimes you need to subtract areas, and transferring parts to elements (that is, describing rectangles or paths directly in g#e1 ) is not desirable, because if you do this, it becomes difficult to make edits. In addition, some elements are used several times (for example, as the element itself, and as a "deductible" for another).

Thanks in advance for your help.

Result of an example from JSFiddle in GC 46 and MF 40

    0