Menu
I have replicated my problem in the following simple example
I have a simple webpage like the following:
<html>
<head></head>
<body>
<img src="icons.svg#close"></img>
<br>
<img src="icons.svg#error"></img>
</body>
</html>
Viewing this page locally in Safari, the page renders correctly:
where the close icon appears above the error icon.
However, when I serve the file with NodeJS webapp (or use the python SimpleHTTPServer command) and view it in Safari, then the images are in each other's places:
even though the dom still looks correct, and the src attributes of each img tag hold the correct paths.
Here is the icons.svg file:
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>:root>svg{display:none}:root>svg:target{display:block}</style>
<svg viewBox="0 0 12 12" enable-background="new 0 0 12 12" id="close">
<path d="M7.2 6l4.5-4.4c.4-.4.4-.9 0-1.3s-.9-.4-1.3 0L6 4.7 1.6.3C1.2-.1.7-.1.3.3s-.4.9 0 1.3L4.7 6 .3 10.4c-.4.4-.4.9 0 1.3.2.2.4.3.6.3s.5-.1.7-.3L6 7.3l4.4 4.4c.2.2.4.3.7.3.2 0 .5-.1.7-.3.4-.4.4-.9 0-1.3L7.2 6z" opacity=".3" enable-background="new"/>
</svg>
<svg viewBox="0 0 58 46" enable-background="new 0 0 58 46" id="error">
<style type="text/css">.st0{fill:#ff9141}.st1{fill:#fff}</style>
<path class="st0" d="M30.6 1c-.9-1.4-2.3-1.4-3.2 0L.4 43.5C-.5 44.9.2 46 1.8 46h54.4c1.7 0 2.3-1.1 1.4-2.5L30.6 1z"/>
<path class="st1" d="M26.3 15.2h5.5V30h-5.5zM26.3 33.5h5.5v5.3h-5.5z"/>
</svg>
</svg>
The page is rendered correctly in all of the other browsers, regardless of if the file is being loaded locally or served through a server.
664
This is due to incomplete/buggy SVG fragment CSS support in Safari. Browser support for this technique is still relatively patchy - see https://css-tricks.com/svg-fragment-identifiers-work/
Current versions of Chrome/Safari/Opera (38/8/25) handle all the HTML techniques well, but none of the CSS techniques, including the background-position one.
Here's how my Safari 8 (left) and Chrome (right) render the test page - note that the icons should go 
every time:
Some experiments with your content follow:
If I repeat the pair of images a second time, the fourth image is somehow a composite of the two (below left). No interpretation of your svg should ever be able to produce an image like this. Interestingly, I get exactly the same split if you use different styling properties, e.g. opacity (below right):
If I zoom in and out with cmd++ and cmd+-, the overlaps and partial images change.
Resizing the page also has an effect.
Speculating that the styling of the images might somehow be interacting with one another, I tried having four different copies of the image (icons1.svg#close, icons2.svg#error etc.) and referring to them separately. This mostly fixed the problem, but the fourth image was missing the bottom three quarters. However, as soon as I resized the window, the missing part of the image appeared.
Bottom line: incomplete/buggy svg fragment identifier/CSS handling.
81
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
