You are not logged in.

1

Monday, June 13th 2016, 10:59pm

How to add SVG layer

Hi guys!
I need help, I want to make interactive block with floor plans.
Just an example of idea
I want to add onhover to the layers with the plans. But need layers without the background as svg.
Is it possible to add a svg file with an embedded polygon in krpano?

Here is an example of the svg code with the image and contour

SVG link

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
 id="svg2" inkscape:version="0.91 r13725" sodipodi:docname="001.svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="492px" height="252px"
 viewBox="63.138 94.445 492 252" enable-background="new 63.138 94.445 492 252" xml:space="preserve">
<g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1">
	<image overflow="visible" width="600" height="326" xlink:href="01.png" transform="matrix(0.8173 0 0 0.8173 64.5195 79.9995)">
	</image>
	<path id="path3351" inkscape:connector-curvature="0" fill="none" stroke="#000000" d="M98.857,214.175l2.286,18.572l46.571,28.286
 l11.429-3.429l129.714,76.286l228.857-161.714l2.857-14l-84.857-14.286L436,133.033l-45.429-6.572L98.857,214.175z"/>
</g>
</svg>


Please help add this svg to krpano *confused* *confused*

if I just add it to layer url="skin/01.svg" he added with a background as a PNG, without path svg... I need to do onhover as here - http://www.petercollingridge.co.uk/sites…/peter/star.svg


Many thanks for help!



Umalo

Professional

Posts: 1,048

Location: Osijek, Croatia, EU

  • Send private message

2

Thursday, June 16th 2016, 11:47pm

As I think SVG is not supported I have idea on how this can be done. Using many small containers to capture mouse/touch events you can define active areas as you like. Not perfect solution but working. Can be done much more in detail this is just quick dirty solution.

(click on image to see demo)

3

Friday, June 17th 2016, 12:32am

As I think SVG is not supported I have idea on how this can be done. Using many small containers to capture mouse/touch events you can define active areas as you like. Not perfect solution but working. Can be done much more in detail this is just quick dirty solution.
Umalo, you're awesome! Thank you so much for this huge work! It really works as I wanted. Many thanks for the help!! *thumbup* *thumbup* *thumbup*

4

Friday, November 29th 2019, 2:09pm

it's great

I learn a lot from the solution . it's useful .


I create my SVG images by Inkscape . Inkscape does vector graphics, which is great for print media. I use it for making publication quality figures. eg. Setting fonts, doing layouts, or making cartoons.


I used a XP-Pen Star 03 ( https://www.xp-pen.com/product/44.html ) graphics tablet , it was the large size. Great tablet lasted me for about 3 years until I got my Artist 15.6 Pro pen display tablet .