Question: How to trigger overlay hyperlinks in an SVG? - javascript

I need to present facsimile copies of articles I've written, with clickable links, on my portfolio webpage.The approach that seems likeliest to work is imagemaps in svgs, because the hyperlink retains its position on the image as the image responds to different screen sizes. (I've already tried the slice tool in Photoshop, which is too hard to work with, and Adobe Muse, which is easy but doesn't handle responsive maps well) I've succeeded in making responsive images with links, embedded in another page. Now my problem is to make those links trigger a javascript plugin (Floatbox) that presents overlays. I can't get them to work, and in fact I keep breaking the imported .svg.
Ordinarily, I'd trigger such a link with something like this:
<a href="website/" class="floatbox" data-fb-
options="width:80% height:80% scrolling:yes">Website Function</a>
But that doesn't work here. Here's how I have a sample page set up now, with a greatly truncated representation of the imported image, just for context, and the link presented in its native (unaltered) state:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Declaration</title>
<link type="text/css" rel="stylesheet" href="floatbox/floatbox.css" />
<script type="text/javascript" src="floatbox/floatbox.js"></script>
</head>
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 882.5 245.9" style="enable-background:new 0 0 882.5 245.9;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.35;fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
</style>
<image style="overflow:visible;" width="750" height="209" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAADRCAYAAACTrj
WiZHqpWs2ra3VpcUIHa9SXqqpTl7bIMTyBQNNl13NkAT59pgAWq1evp/A/lH6dv6rBKPAAAAAElF
TkSuQmCC" transform="matrix(1.1767 0 0 1.1767 0 0)">
</image>
<a xlink:href="https://www.loc.gov/resource/rbc0001.2004pe76546/?sp=1" >
<rect x="94.5" y="67.5" class="st0" width="773" height="55"/>
</a>
</svg>
</body>
</html>
I'd really appreciate any suggestions on what I need to do to trigger Floatbox in the links. While I'm asking, I should point out that there's a lot I don't know about the language of coding. I'm self-taught. So the more specific the suggestions, the better.
Thanks in advance.

Related

Stop embedded SVGs from capturing mouse events on Chrome

Pretty straightforward. I have an SVG embedded in my document through <object> and I'm applying pointer-events:none in the style at the root <svg>. It works in Firefox but not in Chrome (I'm not interested in any other browsers at the moment)
MWE
Have an HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Why you no fix, Chrome?</title>
</head>
<body>
<a id="click"><object data="svg.svg" type="image/svg+xml"></object></a>
<script>document.getElementById('click').addEventListener('click',e => console.log(e));</script>
</body>
</html>
Have an SVG file
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" style="pointer-events:none">
<path fill="#4a90d6" fill-opacity="1" stroke="#222222" stroke-width="2" d="M 0 0 L 100 0 L 50 100 z" />
</svg>
If there is no way to allow the event to bubble up to the anchor (ie: stop svg from capturing), then a way to pass an event through the event horizon would also be nice
EDIT
I forgot to add that the <object> element has to remain clickable. And I emphasize that the MWE works in Firefox but not in Chrome
try
<object style="pointer-events:none" ... >
that should do the trick ;-)

Tooltipster plugin to work on elements in an SVG object file

I've been using the Tooltipster plugin for various elements on my website (recommend this plugin btw) and I've decided that I'd like to use it on elements within an SVG object file but this is turning out to be a lot more difficult than first thought.
So on my html page, I have the object:
<object style="width:100%; height:auto;" class="navmap" type="image/svg+xml" data="location.svg">
Stop using that old-ass Internet Explorer XD!!
</object>
A simple SVG mockup for the sake of this question (my svgs are huge):
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="377.7px" height="377.7px" viewBox="0 0 377.7 377.7" enable-
background="new 0 0 377.7 377.7" xml:space="preserve">
<g>
<circle fill="#898989" cx="188.85" cy="188.85" r="188.85"/>
</g>
<a xlink:href="#" target="_top" title="Give that circle a tooltip"
class="tooltip">
<g>
<circle fill="#231F20" cx="186.2" cy="192.01" r="82.5"/>
</g>
</a>
</svg>
How Tooltipster works:
For those of you who aren't familiar with tooltipster, all you have to do is assign a class or id to the tooltipster plugin, like so:
<img src="my-image.png" class="tooltip" title="This is my image's
tooltip message!" />
$(document).ready(function() {
$('.tooltip').tooltipster();
});
and Tooltipster will use the title attribute of an element for the tooltip as shown above OR you can use javascript to generate the tooltip message:
<img src="my-image.png" class="tooltip" />
$('.tooltip').tooltipster({ content: 'This is my image's
tooltip message!' });
Dead simple!!
Back to my svg issue
So I'm trying to get the tooltipster plugin to work on the a xlink element in my svg BUT it turns out that using those general methods above doesn't work for elements within an SVG object.
Why is this?
First off, do I NEED to link my javascript file in the SVG file like so (like you would do with an external style sheet) ...
<script xlink:href="js/scripts.js" />
... in order for it to make use of javascript (and tooltipster plugin)? I've tried this already however and it doesn't work but since nothing has worked yet so far, I'd like to know if linking to my external js file is required? NOTE: I've put the tooltipster plugin into my external js file being - scripts.js
Nothing I do is working! I can only assume that this ...
$(document).ready(function() {
$('.tooltip').tooltipster();
});
... cannot find the element in the SVG file.
I've put together a simple FIDDLE - please take a look.
I've done my research online and there aren't any posts related to Tooltips for elements in an SVG object using the-Tooltipster plugin and "solutions" for other peoples queries ain't working for my case.
I'd appreciate your help and guidance
UPDATE:
I've tried this technique found online but I don't know if I'm doing this correct otherwise I'm really clutching straws at the moment:
window.onload=function() {
// Get the Object by ID
var svg = document.getElementById("circle-svg");
// Get the SVG document inside the Object tag
var svgDoc = svg.contentDocument;
// Get one of the SVG items by ID;
var circle = svgDoc.getElementById("tooltip");
// Set the colour to something else
circle.tooltipster();
};
Fiddle using code above.
*LATEST UPDATE
Ah!!! (Thanks to Evan) I made such an amateur mistake and forgot to include jquery library in my fiddle!! But this still hasn't solved my problem!
Okay so please see updated Fiddle:
HTML:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="377.7px" height="377.7px" viewBox="0 0 377.7 377.7" enable-
background="new 0 0 377.7 377.7" xml:space="preserve">
<g>
<circle fill="#898989" cx="188.85" cy="188.85" r="188.85"/>
</g>
<a xlink:href="#" target="_top" title="Give that circle a tooltip"
class="tooltip">
<g>
<circle fill="#231F20" cx="186.2" cy="192.01" r="82.5"/>
</g>
</a>
JS:
$('.tooltip').tooltipster();
As you can see in the fiddle, the tooltip works 100% fine now (this is because the SVG code is IN the HTML. As soon as I link the SVG in my html as an OBJECT (Like I'm doing on my website) like so ...
<object style="width:100%; height:auto;" class="navmap"
type="image/svg+xml" data="location.svg">
Stop using that old-ass Internet Explorer XD!!
</object>
... the tooltip doesn't work!
What am I missing? How do I get the javascript to work for the title attribute in the xlink above? Do I need to put the javascript IN my SVG file or? Do I need to somehow GetelementsbyID now that it's an object?
Help much appreciated once again

How to get hammer.js to work with svg files without using jquery?

I am trying to implement the hammer.js with svg files and without using any jquery. I'm trying to use the sample code from the hammer.js site {https://github.com/EightMedia/hammer.js/wiki/Getting-Started}. I have the external javascripts called like this.
<script src="javascript/hammer.js" type="text/javascript"></script>
My javascript is as follows:
<script type="text/javascript">
//<![CDATA[
var element = document.getElementById("testsvg");
var hammertime = Hammer(element).on('doubletap', function(event){
alert("doubletap!");
return false;
}
);
//]]>
</script>
My svg looks like the following.
<svg version="1.1" id="testsvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="585px" height="230" viewBox="0 0 585 230" enable-background="new 0 0 585 230" xml:space="preserve">
<rect x="10" y="10" height="210" width="565" style="stroke:#006600; fill: #00cc00"/>
</svg>
Starting out, I'm just trying to get any detection to work. I do not get any alert when I double tap. I have also tried to implement this with the hammer.fakemultitouch.js plugin on my desktop. Neither the desktop or touch environment do anything.
Anyone have any idea what I might be doing wrongly?
Thanks,
--christopher
First make sure hammer.js is loading correctly. If it is, then you are most likely executing the javascript before the DOM is loaded. The easiest way to fix this is to place your <script> right before the closing </body> tag (near the bottom of your html file). You can also wrap your code in a load event function such as...
window.onload = function(){
var element = document.getElementById("testsvg");
var hammertime = Hammer(element).on('doubletap', function(event){
alert("doubletap!");
return false;
});
}

How do I make a responsive image map where the image AND hotspots automatically resize with window?

First off, I apologize if this question is worded weird and off, I'm trying to put in code and make my questioning better since my last questions were erased. I just need to get help with this coding.
I have tried several jquery/javascripts on the image map and none have worked. The ones I've tried are at:
view-source:http://home.comcast.net/~urbanjost/IMG/resizeimg.html
https://github.com/stowball/jQuery-rwdImageMaps
My code for image map:
<img src="images/background.jpg" usemap="#banner" />
<map name="banner">
<area shape="rect" coords="109,7,435,324"
href="http://www.instituteforcreativelearners.org/" target="_blank" alt="The Institute
for Creative Learners">
<area shape="rect" coords="976,98,1295,278" href="http://www.adoptioncovenant.org/"
target="_blank" alt="Adoption Covenant">
</map>
I have also tried saving the image as a SVG file and it still doesn't resize the links/hotspots along with the image. (This is the straight svg code but I did add the links to the rectangles when I tried it)
<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;"
xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" viewBox="0 0 2020 600" style="enable-background:new 0 0 2020 600;"
xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
</style>
<image style="overflow:visible;" width="2021" height="601" xlink:href="background.jpg"
transform="matrix(1 0 0 1 0.5 -0.5)">
</image>
<rect x="143.3" y="0" class="st0" width="468" height="454.8"/>
<rect x="1310.4" y="127.7" class="st0" width="468" height="249"/>
</svg>
Is there anyone that can help me?
I've not attempted this before, but a possible solution may be to use jQuery/JS to determine the window width, and update the image and map based on that.
First approach would be to set separate widths based on devices. The second approach would be a dynamic one using window.resize so that the values update dynamically based on the window width.
So first approach would look something like...
$(window).resize(function(){
if($(window).width()>=640){
//set your html for this screen width
}
else if($(window).width()>=320){
//set your html for this screen width
}
});
And the second approach would be something like
$(window).resize(function(){
var x, y, imgMap;
x = $(window).width() - 200;//update coords...
imgMap = "<html for img map here>";
}
});
Hope this helps a bit...
Here's info on resize

SVG generated by AI not showing after include

I have a .svg file generated using Adobe Illustrator. These is the structure of the SVG file:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.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="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1068px" height="1671.49px" viewBox="0 0 1068 1671.49" enable-background="new 0 0 1068 1671.49" xml:space="preserve">
<g>
<polygon fill="#C6C6C6" points="451.07,1979.34 451.07,1979.34 450.8,1979.17 448.72,1978.82 448.6,1978.71 448.34,1978.59
447.71,1978.36 448.01,1978.33 450.2,1978.3 452.53,1978.76 451.35,1979.08 451.73,1979.29 "/>
<!-- more polygon shapes -->
</g>
</svg>
Then I include it using the <embed> tag like this in my .html file. Structure of the HTML file:
<!DOCTYPE html>
<html>
<head>
<title>My Demo</title>
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/raphael-min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="shape1"></div>
<div id="shape2"></div>
<div id="shape3"></div>
<div id="embed_svg">
<embed src="my_svg_file.svg" type="image/svg+xml" />
</div>
</body>
</html>
Notes:
I don't think that is browser support related since I've drawn 3 HTML5 shapes using the raphael.js HTML5 library and they work perfectly. (tried on chrome and firefox)
Including the file doesn't work as it should. The browser seems to parse it but it just doesn't seem to display it.
The co-ordinates in your shapes are very similar so the polygon covers a very very tiny part of the viewBox area.
If you change the viewBox of the <svg> element to viewBox="448 1977 5 10" the shape will be displayed as the visible region now more closely matches the polygon co-ordinates, alternatively make the polygon bigger.

Resources