I am a rookie web developer and I am looking to put data points over an image that can be interacted with when hovered over, similar to most common map applications.
From my current understanding, using the Canvas in Javascript seems to be the best way to go, does anyone have any recommendations on how to do this and maybe point me in the right direction?
Does not require canvas although canvas can be used.
Shortest coding would be make a div with a background image being the image you want to place points on.
If it is not an image then you would need to make two divides on the overlay divide (the first one in the HTML code) use position:absolute to place it on top with the same width and height -- then the image content divide that follows will be layered under your absolute positioned divide.
<div style="background:url(image.jpg); width:100px; height:100px">
... material here is on top of the image ...
</div>
or
<div style="position:absolute; width:100px; height:100px">
... material here is on top of the image ...
</div>
<div style="width:100px; height:100px">
... place object here which picks up your map or whatever ...
</div>
The ... material here is on top of the image ... can be a canvas but SVG would be less coding as it has links supported
<div style="background:url(image.jpg); width:100px; height:100px">
<object data="yourOverlay.svg" width="100" height="100" >
</object>
</div>
Here is a sample SVG file posted at http://tutorials.jenkov.com/svg/a-element.html
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="/svg/index.html">
<text x="10" y="20">/svg/index.html</text>
</a>
<a xlink:href="/svg/index.html" xlink:show="new">
<text x="10" y="40">/svg/index.html
(xlink:show="new")</text>
</a>
<a xlink:href="/svg/index.html" xlink:show="replace">
<text x="10" y="60">/svg/index.html
(xlink:show="replace")</text>
</a>
<a xlink:href="/svg/index.html" target="_blank">
<text x="10" y="80">m/svg/index.html
(target="_blank")</text>
</a>
<a xlink:href="/svg/index.html" target="_top">
<text x="10" y="100">/svg/index.html
(target="_top")</text>
</a>
</svg>
Depending on your application you may want to consider straight HTML for "... material here is on top of the image ..." so it will work in older browsers.
And FYI you could code the background into the SVG and just have a object tag in the html page and use googles "SVGWEB" http://code.google.com/p/svgweb/ to support nearly every browser.
Good resource here: http://dev.opera.com/articles/view/html5-canvas-painting/
But for what you're doing, you don't really need a canvas, imo. If you have an image, and you know where stuff is that you want to overlay (pixel offset), you can provide the pixel offsets from each data point in JSON or XML to your client script, and then just have it use absolute positioning to place them where they need to be on the image.
Another possible solution is to just use an SVG image which i believe supports links ect directly
Related
I am trying to use the Tabby JS Plugin with an inline SVG element. Clicking anchor tags outside of SVG works perfectly, when wrapped around SVG elements, the page 'jumps' to the ID.
Can anyone out there provide an explanation for why this happens?
https://github.com/cferdinandi/tabby
I have created a demo using the original plugin HTML where you can see this issue.
<g data-tabs>
<a data-tab href="#tab1">
<rect id="red" x="177.9" y="44.2" class="tab st1" width="96" height="77.5"/>
</a>
<a data-tab href="#tab2">
<rect id="orange" x="107.9" y="169.8" class="tab st2" width="166" height="101.5"/>
</a>
</g>
Many thanks in advance
This is happening as you are using tabby to show your HTML elements in tabs while for SVG elements you have used # (Location Hash) to navigate to a page element. Location hash will make the control jump to the element specified. This is the behaviour that you are are noticing.
You can read the below blogs to get a good idea as to how the Location hash navigation happens.
W3 School Documentation: https://www.w3schools.com/jsref/prop_loc_hash.asp
Blog Explaining Navigation: https://www.oshyn.com/Blogs/2011/December/JavaScript_Navigation_using_Hash_Change____
I am using a svg logo for my website, as shown below:
<img alt="" class="logo logo-dark" src="images/logo-dark.svg">
The svg file contains the following information about the size:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-274.1 380.7 46 41.9" width="40">
to determine the width.
Even though it is shown correctly in all browsers, in Microsoft Edge it is shown 10 times bigger.
What am I missing out?
Update: The .logo has max-width:100%
Instead of using the width in the svg, use it in the img tag like this:
<img alt="" class="logo logo-dark" src="images/logo-dark.svg" width="40">
You can also set both height and width on the svg instead of only width.
I would like to do "complex" animation with gsap and svgs.
but I don't know what is the best approach to this.
it is better to create and to import an unique svg with all the elements or maybe it is better 4 different svgs?
I have 4 different characters: a tree, a lamp, a desk and a man.
basically my animation is move the objects on the x, and appearing and to disappearing stuff.
If the elements of the animation are part of one complex animation, you can use one single SVG for this.
To control the DOM of the SVG via CSS and JavaScript you need to add the SVG directly inline into your HTML page. Not embed via img tag or object tag or similar.
<body>
<h1>My SVG Animation</h1>
<svg width="100" height="100" viewBox="0 0 300 100">
<circle class="animation-element-01" cx="50" cy="50" r="40"/>
<rect class="animation-element-01" x="150" y="20" width="150" height="150"/>
<!-- etc -->
</svg>
</body>
Another advantage of this method is, that there is no additional html requests.
Plus the whole animation can be made responsive via the viewBox.
I'm trying to create an SVG-based menu. I'm completely new to SVG, and have been searching for 1.5 days for a simple example of interaction between JS and SVG. My document structure is:
/LOCAL_FOLDER (not on a server yet)
+index.html
/CSS
+global.css
/JS
+navigation.js
/IMAGES
+navigation.svg
I have a simple html body
<body>
<div id="outer-container">
<div id="navigation-container" onclick="javascript:changeColor();" >
<object id="navigation" type="image/svg+xml" data="images/test.svg" >Your browser does not support SVG</object>
</div>
</div>
</body>
My SVG looks like this (for now)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle id="test" cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>
This is the general structure I want to use. As you can see, it has JS from the html head (linked) interacting with my SVG #test. For now, I'd deal with having it change opacity on load just so I can start figuring out HOW to interact.
I've tried JQuerySVG, Raphael, straight JS, JS within SVG, etc, and I can't seem to connect. What I'm looking for (and can't seem to find an operational snippet of) is a super basic example that I can then learn from...
From what I've tried, I rarely had success using data="", however using something like container.load(your.svg), I could then modify to my hearts content.
another issue is to make sure that the svg data was standard.
from there (I used jQuery) jQuery('#test').attr('style','stroke:#ff0000') should change the stroke to red.
I have a .svg file that has the following code:
<svg version="1.1" x="0" y="0" width="256" height="256" viewBox="0 0 335 394">
plus a ton more code (namespaces etc) that is unnecessary to this situation, but the problem I have is that I need to somehow alter that width and height (from 256px to arbitrary size) using JavaScript. The .svg is being used like this:
<html>
<body>
<div style="background: url(example.svg);"></div>
</body>
</html>
I would really need to accomplish this somehow. Any ideas?
Update: I need this because I want a user to be able to set the base size for my user interface via a JavaScript control.
How about putting an <img> tag inside the div, and setting the width and the height on that?
<html>
<body>
<div>
<img src="example.svg" width="10px" height="10px" />
</div>
</body>
</html>
This will allow your browser to automatically scale the image based on the given dimensions.