html - SVG background image is not showing as it should in Safari/Safari Mobile -
i'm renewing webpage of book publisher has books online. have in jpg i'm migrating svg. i'm doing test of book viewer , way found contain svg image container size make background image. works in chrome, i'm having problems safari desktop , mobile also. both of them shows svg image miss essential part of it.
i uploaded see i'm talking about: http://www.edicionesbabilonia.com/svg.html
i attach code i've been using:
<!doctype svg public “-//w3c//dtd svg 1.1//en” “http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd”> <html> <head> <style type="text/css"> body, html { height: 100%; width: 100%; margin: 0; padding: 0; } .divsvg { border: 1px solid #999; height: 100%; /* collapse container's height */ width: 50%; /* specify width want (a percentage value, basically) */ /* apply padding using following formula */ /* formula makes sure aspect ratio of container equals of svg graphic */ /* create positioning context svg */ background-image: url(pv-58.svg); background-size: contain; background-repeat: no-repeat; } #left { float: left; background-position: right center; } #right { margin-left: 50%; background-position: left center; } </style> </head> <body> <div class="divsvg" id="left"> </div> <div class="divsvg" id="right"> </div> </body> </html>
apparently there bug on webkit needs load object. possible load object , hidden it...
i've got answer from: svg embedded bitmap not showing bitmap when using <img> tag in webkit browser
Comments
Post a Comment