Full-Screen clickable SVG in Android <4.4


#1

Dear folks, i am facing the following problem:
I have a SVG which has links in it, so i have to build it into the app as
In Android 4.4 and iOS 7 i works perfectly with following CSS:
HTML:

	<div id="schlange" ng-switch="landscape">
		<object ng-switch-when="true" class="special101quer" data="img/history_landscape.svg" type="">
			<p></p>
		</object><!-- width="960" height="500" -->
		<object ng-switch-default class="special101hoch" data="img/history_portrait.svg" type="">
			<p></p>
		</object>
	</div>

CSS:

#schlange {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
				
				.special101hoch
				{
					display: block;
					width:100vw;
					height:80vh;
					margin: 3vh auto;
				}
				
				.special101quer
				{
					display: block;
					width:100vw;
					height:80vh;
					margin: 3vh auto;
				}

This does not work in Android 4.3, 4.2, 4.1.

I have tried to set position:absolute to position :fixed in #schlange and to set width and height within the object tag to 100%. This works partially - the width and height fits, but the SVG don’t scale any more.

Can anybody help me please?

Thanks in advance,
Lukas


#2

Could you provide a codepen for this? I have no clue how it looks right now, what the html around the parts you’re showing is etc. Code seems valid, and position:absolute is preferred over position:fixed since the latter has really bad support on mobile devices.


#3

Thanks for your answer!

I am quite new to all this stuff and this is my first codepen :wink:

I hope, there is everything relevant included. I am using the ionic sidemenu template.

Thanks a lot!


#4

Well, you’re codepen had everything necessary :smile:

Take a look at my updated version:

I’ve basically changed the data tag from the object to background-images on the corresponding classes, seems to work perfectly (svg’s cropped because of the height 80vh at the moment)

Have no clue on why the data tags are not working, but will look into that… For now, here you go with a quick solution :slight_smile:
update: Can’t find any reason why it isn’t working, but I can’t make it work with the data attribute and corresponding type tag: type=“image/svg+xml” Maybe someone else could shine some light on this… (According to memory and quick googling, this should be a fairly correct way to include svg images… Nonetheless, can’t get it to work)


#5

Thanks for your effort,

but the links have to be clickable and the css-solution is not.

I am currently trying to set up invisible Links, as overlays, but if i’m honest i don’t want to leave this really beautiful solution with <object> tags.


#6

Are you able to make the links clickable and working without ionic? I think there is something wrong with either your svg or the typesettings or maybe something else… It just doesn’t feel right while fiddling, like I’m overlooking something pretty simple :confused:


#7

I think i have found a solution for that problem - and it’s quite easy. I have edited the SVG and the CSS. Following lines in SVG are different:

<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
 y="0px" width="820px" height="462px" viewBox="0 0 820 462" xml:space="preserve">

is now

<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
 y="0px" width="100%" height="100%" viewBox="0 0 820 462" xml:space="preserve">

and the CSS is now

.special101hoch
{
display: block;
width:100vw;
height:80vh;
margin: 3vh auto;
}
.special101quer
{
display: block;
width:100vw;
height:80vh;
margin: 3vh auto;
}

.special101quer svg, .special101hoch svg {
margin:0 auto;
max-height:100%;
max-width:100%;
}

It’s kinda hacky, but it works. Thanks for your effort!

Oh, and it works on Android
4.1+ and iOS!