css - Problems with keeping aspect-ratio of background image inside fluid SVG -
i have svg total page width/height, svg , polygons within svg alter shape , size according window, achieved setting preserveaspectratio on svg element "none". polygons have background image, supposed maintain aspect ratio, because set preserveaspectratio "xminymin slice". sadly preserveaspectratio on svg element seems causing conflict , background image changes aspect ratio when alter window size. want svg equivalent of "background-size: cover".
<!doctype html> <html> <head> <title>svg test</title> <style type="text/css"> html, body { height: 100%; margin: 0px; padding: 0; } svg { float: left; } </style> </head> <body> <svg version="1.1" id="gallery_overview" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" x="0px" y="0px" viewbox="0 0 400 400" enable-background="new 0 0 400 400" preserveaspectratio="none"> <defs> <pattern id='image1' width="1" height="1" viewbox="0 0 100 100" preserveaspectratio="none"> <image xlink:href='http://upload.wikimedia.org/wikipedia/commons/d/d3/statue_of_liberty%2c_ny.jpg' width="100" height="100" preserveaspectratio="xminymin slice"></image> </pattern> <pattern id='image2' width="1" height="1" viewbox="0 0 100 100" preserveaspectratio="none"> <image xlink:href='http://upload.wikimedia.org/wikipedia/commons/9/94/top_of_rock_cropped.jpg' width="100" height="100" preserveaspectratio="xminymin slice"></image> </pattern> <pattern id='image3' width="1" height="1" viewbox="0 0 100 100" preserveaspectratio="none"> <image xlink:href='http://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/chinatown_manhattan_2009.jpg/1920px-chinatown_manhattan_2009.jpg' width="100" height="100" preserveaspectratio="xminymin slice"></image> </pattern> </defs> <polygon fill="url(#image1)" points="0 0, 400 0, 200,200"/> <polygon fill="url(#image2)" points="0 0, 400 400, 0 400"/> <polygon fill="url(#image3)" points="400 0, 400 400, 200 200"/> </svg> </body> </html> click here demo
with preserveaspectratio set "none", telling browser stretch 400x400 image fill screen. there no conflict or error there. doing tell it.
if svg beingness stretched, contents affected. there no way around - other using js adjust svg contents.
you utilize alternative css masks. not supported ie.
css svg polygon
No comments:
Post a Comment