Anyone ever manage to use an SVG as a hotspot?
Is/would this even possible in KRPano now?
Been playing with this but before rabbit-hole-diving I figured I'd ask.
SVG hotspot?
-
-
I had to do a Google search to find this. Pretty odd since I searched the forum for: SVG hotspot several times.
Anyone know of another method/angle on this?
-
Hi Douglas,
something like this?
https://www.virtualtuur.com/krpano/120/examples/svg/1/
https://www.virtualtuur.com/krpano/120/examples/svg/1/tour.xmlHope it helps,
Tuur -
interesting... this works on firefox (83), but not on safari (12.1.2)
-
index
Perhaps update?
For me works fine on iphone and mac, safari (current)Tuur
-
just wanted to mention it. this is a sierra installation.
if that is on safari 12 only its not really a biggie, but if i'd build a commercial tour with it, i'd check the browser support first.
-
Tuur,
You are a gentleman and a scholar. Thank you!
-
Hi Tuur,
I tried your xml using an SVG file and not a base64.
It works under Chrome/Edge/IE but not under Firefox ( and I don't have Apple hardware to test Safari).
My file is generated by Illustrator.
It seems that the width and height information is missing from your base64.
How do you generate your base64?
Here are my tests:
SVG: https://www.v36.fr/visite-virtuel…irtualmedia.svg
KrPano: https://v36.fr/visite-virtuelle/201221-SVG/tour.htmlThanks !
-
Hi,
Problem solved!
I switched to Adobe Animate to make my exports and everything is OK ! -
You are a gentleman and a scholar.
ALWAYS, SINCE 2008 i think you must open a youtube page how to make krpano TUUR
-
dear tuur and forummembers
Unfortunately, I'm not able to integrate a svg file as a hotspot
I searched for xml file exporter in illustrator but couldn't find anything...Code<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 300"><path d="M968,144.18H99.46a34.87,34.87,0,1,0,0,11.64H968Z" style="fill:#fff;stroke:#231f20;stroke-miterlimit:10"/></svg>
Can anybody help me further
wbr from tirol
klaus -
these should work :
https://heyallan.github.io/svg-to-data-uri/
https://davidgierth.de/tools/svg-to-data-uri/drop your svg (code) into the input field, then copy the data uri into you url in krpano.
eg.
Code<hotspot name="mysvg" url="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAwIDMwMCI+PHBhdGggZD0iTTk2OCwxNDQuMThIOTkuNDZhMzQuODcsMzQuODcsMCwxLDAsMCwxMS42NEg5NjhaIiBzdHlsZT0iZmlsbDojZmZmO3N0cm9rZTojMjMxZjIwO3N0cm9rZS1taXRlcmxpbWl0OjEwIi8+PC9zdmc+" ... />
-
Thanks alot mr.indexofrefraction! to you
(and many others of course) always can be counted on!!!
wbr klaus -
Hello! Do I understand correctly that with this version of the display, svg is converted into a picture and there is no difference from it?
When approaching, we see the same pixels as in the picture ...
Is it possible to show svg like svg? -
Zitat
Do I understand correctly that with this version of the display, svg is converted into a picture
no no, the svg is still an svg.https://css-tricks.com/lodge/svg/09-svg-data-uris/
https://developer.mozilla.org/en-US/docs/web…_http/data_urls -
Here is a simple example of what is possible with SVG when used as UI elements.
Same concept can be used for hotspots as well...Code<style name="nav_btn_icons" svg_fill="calc: newskin_settings.nav_icon_color" svg_height="28" svg_width="28" svg_viewBox="0 0 28 28" width="28" height="28" align="center" x="0" y="0" visible="true" enabled="true" capture="false" bgcapture="false" />
************ PLUGIN : svg.js ************
Code
Alles anzeigenfunction krpanoplugin() { var local = this; var krpano = null; var plugin = null; var device = null; var svgNode = null; local.registerplugin = function(krpanointerface, pluginpath, pluginobject) { krpano = krpanointerface; device = krpano.device; plugin = pluginobject; plugin.registerattribute('svg_title', null); plugin.registerattribute('svg_fill', null); plugin.registerattribute('svg_stroke', null); plugin.registerattribute('svg_height', null); plugin.registerattribute('svg_preserveAspectRatio', null); plugin.registerattribute('svg_viewBox', null); plugin.registerattribute('svg_width', null); plugin.registerattribute('svg_x', null); plugin.registerattribute('svg_y', null); plugin.registerattribute('svg_tween_time', 0.25); plugin.registerattribute('loadSVG', loadSVG); plugin.registerattribute('changeColor', changeColor); loadSVG(plugin.svg_title, plugin.svg_fill, plugin.svg_stroke); }; function loadSVG(svg_title, svg_fill, svg_stroke) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == XMLHttpRequest.DONE) { if (xmlhttp.status == 200) { plugin.sprite.innerHTML = xmlhttp.responseText; svgNode = plugin.sprite.firstElementChild; if (svg_fill) { svgNode.style.fill = '#' + svg_fill; } if (svg_stroke) { svgNode.style.stroke = '#' + svg_stroke; } svgNode.style.transition = 'fill ' + plugin.svg_tween_time + 's linear-in-out'; if (plugin.svg_width != null) { svgNode.setAttribute('width', plugin.svg_width); } ; if (plugin.svg_height != null) { svgNode.setAttribute('height', plugin.svg_height); } ; if (plugin.svg_viewBox != null) { svgNode.setAttribute('viewBox', plugin.svg_viewBox); } ; if (plugin.svg_x != null) { svgNode.setAttribute('x', plugin.svg_x); } ; if (plugin.svg_y != null) { svgNode.setAttribute('y', plugin.svg_y); } ; } else if (xmlhttp.status == 400) { krpano.trace(3, 'There was an error 400'); } else { krpano.trace(3, 'something else other than 200 was returned'); } } }; xmlhttp.open('GET', '/assets/SVG/' + svg_title + '.svg', true); xmlhttp.send(); }; function changeColor(thecolor) { //console.log('change color #' + thecolor); svgNode.style.fill = '#' + thecolor; } local.unloadplugin = function() { delete plugin.divid; plugin = null; device = null; krpano = null; }; };
-
hello douglas
I tried to install the code but unfortunately there is an error messageERROR: parsing '/plugins/svg.js' failed:SyntaxError: Unexpected token ')'
I couldn't find the cause
wbr klaus -
Hi folks,
interesting topic and very challenging. Your script works like a charm, Douglas, thanks
But I wonder, if it´s possible to go even further and convert an SVG into a polygonal hotspot?
The problem with SVG´s is the bounding box (viewBox), which makes the onover-area just as big as the bounding box itself. The great advantage of polygonal hotspots is that their active area is the same as their visible boundings (view attached example).
I know it is possible to use the svg-form as the active area (EXAMPLE) but as soon as I transfer it into krpano the bounding box becomes the active area again
-
I sort of got it working, but it is´nt the most elegant way:
- Convert the path-svg into a poly-svg using online tools
- Tranfer all the points from the svg into krpano and convert them to ath/atv using screentosphere-function
- Use these ath/atv-values as hotspot-points
But there are many problems with this method.
First of all, if the poly uses a specific position inside it´s bounding box, the browser-window needs to be set to that exact size or otherwise screentosphere would´nt return the correct values (at least when using flat-panos). And if you zoom into the pano screentosphere won´t give you the correct values either!Besides the problems it kinda works, at least for single svg´s. But because I want to convert hundreds of svg´s into poly-hotspots, I need some kind of automation. The hardest part for me is to transfer the points from multiple svg´s into krpano. This is how the poly-line in a converted svg looks like:
I´m trying right now to read the whole svg into a JS-var:
Code
Alles anzeigen<object data="svg/cross.svg" type="image/svg+xml" id="test" width="100%" height="100%"> </object> <script> var a = document.getElementById("test"); a.addEventListener("load",function(){ var svgDoc = a.contentDocument; console.log(svgDoc); var id = svgDoc.getElementById("cross"); console.log(id); }, false); </script>
BUT this will copy the whole line id=<polygon id="cross" points="2,1,....... into the var id. But I need only the points, like this id=2,1,3,1,3,2......
Changing the code to "var id = svgDoc.getElementById("points");" does´nt work.And because each poly-point consists of two values (x,y) it would be necessary, to seperate them into pairs like this:
"var1=2,1"
"var2=3,1"
"var3=3,2"...
before transmitting them to krpano using http://krpano.call/krpano.set.Unfortunately my JS-skills are practically nonexistent Any help would be appreciated
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!