You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

1

Tuesday, October 23rd 2018, 10:42am

SVG Icons not available on Firefox

I created a custom skin based on the default skin which uses svg buttons.
On Firefox, these buttons are not available. Neither visible nor clickable. It works on all other brothers (mobile/desktop) though.

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<krpano>
	<!-- krpano 1.19 default buttons skin -->

	<!-- the container layer that contains the buttons -->
	<layer name="defaultskin_buttons" bgcolor="0x000000" bgalpha=".5" bgroundedge="3" type="container" width="330" height="63" align="bottom=" y="-3" scalechildren="true" scale="1.0" keep="true">
		<layer name="btn_left" 	x="15"  y="15" url="/files/zzzz/pfeil-links-w.svg"  width="30px" height="30px" ondown="set(hlookat_moveforce,-1);" onup="set(hlookat_moveforce,0);" />
		<layer name="btn_right"	x="55"  y="15" url="/files/zzzz/pfeil-rechts-w.svg" width="30px" height="30px" ondown="set(hlookat_moveforce,+1);" onup="set(hlookat_moveforce,0);" />
		<layer name="btn_up"   	x="95"  y="15" url="/files/zzzz/pfeil-oben-w.svg"   width="40px" height="30px" ondown="set(vlookat_moveforce,-1);" onup="set(vlookat_moveforce,0);" />
		<layer name="btn_down" 	x="145" y="15" url="/files/zzzz/pfeil-unten-w.svg"  width="40px" height="30px" ondown="set(vlookat_moveforce,+1);" onup="set(vlookat_moveforce,0);" />
		<layer name="trennstrich"  x="205" y="15" url="/files/zzzz/trennstrich-w.svg"  width="10px" height="30px" />
		<layer name="btn_autorot"  x="235" y="15" url="/files/zzzz/drehen-aus-w.svg"   width="30px" height="30px" onclick="switch(autorotate.enabled);" />
		<layer name="btn_fs"   	x="275" y="15" url="/files/zzzz/vollbild-ein-w.svg" width="30px" height="30px" onclick="switch(fullscreen);" visible="true" devices="fullscreensupport" />
	</layer>

	<!-- the container layer that contains the close button -->
	<layer name="defaultskin_button_close" type="container" width="30" height="30" align="righttop" y="15" x="15" scalechildren="true" scale="1.0" keep="true">
		<layer name="btn_close" x="0" y="0" url="/files/zzzz/schliessen-overlay.svg" width="30px" height="30px" onclick="js(window.history.back())" visible="true" />
	</layer>
OIjsQe has attached the following images:
  • Screenshot 2018-10-23 at 10.40.06.png
  • Screenshot 2018-10-23 at 10.40.29.png

2

Tuesday, October 23rd 2018, 11:55am

Hi,

please post a link to your example.

Maybe it's the svg image itself...
The krpano viewer itself basically doesn't care if the image is a png, jpg or svg (or other image format), the url will be only passed to the browser.

Best regards,
Klaus

3

Tuesday, October 23rd 2018, 1:06pm

Hi Klaus,

please have a look at Link .
Thanks.

4

Tuesday, October 23rd 2018, 4:38pm

Hi,
maybe it`s the function itself, which is missing...
Logfile returns the unknown function "update_ctrl_mode()"

Hope that helps,
Steve

5

Tuesday, October 23rd 2018, 6:44pm

Hi,

please have a look at Link .
The problem are your SVG images, they don't have width/height defined and Firefox uses 0/0 as default in this case:


See here:
https://developer.mozilla.org/en-US/docs…l/SVG_Image_Tag

Either try using an other SVG editor or other SVG export settings or add the width/height attributes manually in the SVG files.

Best regards,
Klaus

6

Tuesday, October 23rd 2018, 7:15pm

Hi Klaus,
thank you for your hint.
I was able to fix this.
Example:

Source code

1
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.8 33.32" width="33.8" height="33.8">

The viewBox attribute was already present. I added the width and height attributes. I needed to use a 1:1 ratio as I use this ratio for the layers (see xml snippet above).