How come this code works smoothly in chrome and not in firefox?
I use SnapSVG.
JS:
var pinguin = Snap("#pinguin");
Snap.load("pinguin.svg", bodyload ) ;
function bodyload( data ){
pinguin.append( data );
};
Html:
<svg id="pinguin" ></svg>
<script src="snap.svg.js"></script>
<script src="main.js"></script>
What I get on Chrome:
What I get on Firefox:
I tried to make a fiddle, but the fiddle doesn't work.
Instead, the code and display can be get here: http://www.pinguin.moe/
Do you know how can I fix the display on Firefox?
I think you need to add a width and height to your outer SVG. There is one in the svg file, but not in the markup on the main page. If you set this to 800,600 for example, it should work.
<svg id="pinguin" preserveaspectratio="xMinYMin meet" viewbox="0 0 300 750" width="800" height="600">
Related
I am trying to get a spreadshirt shop integrated on my website but when I add their recommended javascript code it moves my header on the page down. It only happens on that page. My website is https://www.irelandsfuture.com/store and the script looks like this:
<div id="myshop">Spreadshop loading...</div>
<script>
var spread_shop_config = {
prefix: 'https://shop.spreadshirt.ie',
shopName: 'irelandsfuture',
baseId: 'myshop',
};
</script>
<script type="text/javascript" src="https://shop.spreadshirt.net/js/shopclient.nocache.js"></script>
Any ideas how to prevent this please?
Thanks
I just opened the dev tools you have an SVG at the top of your page.
add display: none like this :
<svg xmlns="http://www.w3.org/2000/svg" style=" display: none;">
instead of :
<svg xmlns="http://www.w3.org/2000/svg" display="none">
I have an HTML page with about 100 images. How can I detect when the page has completely loaded, including all images? I have been using the following code, and it seems to work in Chrome 80.
document.onreadystatechange = function () {
if (document.readyState == "complete") {
setTimeout(init, 10);
}
}
However, Firefox 72 fires the init function right away. I can see the images as they pop in and are downloaded after the init function has fired. Is there a cross browser method to do what I need? Thanks.
I have tried window.onload, document.onreadystatechange and window.addEventListener('load', ...) already.
FYI, the image files are PNG format, but are embedded within an SVG file. And the SVG file is embedded within the HTML file. I can post a link if it is desired.
Edit: This is as minimal as I could get it.
<!DOCTYPE html>
<html>
<head>
<title>minimal reproducible example</title>
<meta charset="UTF-8">
<style>
body {padding:0;margin:0;color:#ffffff;background-color:#404040;}
#cross {z-index:2;position:fixed;left:50%;top:50%;visibility:hidden;}
#embed {z-index:1;visibility:hidden;}
#load {z-index:-1;position:fixed;display:inline-block;left:50%;top:50%;width:10em;margin-left:-5em;text-align:center;}
</style>
<script>
function init() {
// in firefox 72 the embedded PNG images are loaded noticeably after the SVG image is made visible instead of before
document.querySelector('#embed').style.visibility = 'visible';
document.querySelector('#cross').style.visibility = 'visible';
}
window.onload = function () {
setTimeout(init, 10);
}
</script>
</head>
<body>
<div id="load">Loading...</div>
<svg id="embed" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1024" height="1024" viewBox="0 0 1024 1024">
<image width="1024" height="1024" x="0" y="0" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQABAMAAACNMzawAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAwUExURQAAAP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFulh5UAAAAJcEhZcwAADsMAAA7DAcdvqGQAAApaSURBVHja7dqxDQNBEAMxt3D9N+sePhGwQ+VMJtbPzMzMzMzMzMzMzMzMzMzM7u59HH/DCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHFvZmZmZmZmZmZmZmZmZmZmB7c+JPBbL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9mZmZmZmZmZmZmZmZmZmZHdz6kMBvvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3ZmZmZmZmZmZmZmZmZmZmdnDrQwK/9QLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2Dcm5mZmZmZmZmZmZmZmZmZ2cGtDwn81gsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxb2ZmZmZmZmZmZmZmZmZmZge3PiTwWy9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvZmZmZmZmZmZmZmZmZmZmR3c+pDAb72AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY92ZmZmZmZmZmZmZmZmZmZnZw60MCv/UCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g0r/3B7oXJhneLUE8AAAAAElFTkSuQmCC" />
</svg>
<img id="cross" width="16" height="16" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAAsSURBVDhPY2xoaPjPQAkAGQAEDORgkF4mqDlkg1EDRg0AgVEDGBgozM4MDAB7ETPvhopeAgAAAABJRU5ErkJggg=="/>
</body>
</html>
What is supposed to happen:
Render gray screen with text "Loading..."
Small gray box appears at the same time (actually immediately after) large grid image is loaded
What happens in Firefox 72:
Render gray screen with text "Loading..."
Small gray box appears before the large grid image is loaded
Not sure how to slow things down enough so the difference is noticeable. You could try copy/paste-ing the large grid image 100 times, moving them to the right by 1024px each time.
Working with embedded SVG in HTML5 I've found strange behavior in Chrome browser. (http://jsfiddle.net/complynx/htp4hqe2/)
For example, in the following html/svg code:
<svg>
<foreignObject>
<body xmlns="http://www.w3.org/1999/xhtml">
<div>foo</div>
</body>
</foreignObject>
</svg>
<script>
var T=document.querySelector("foreignObject");
</script>
Variable T will be null in Chrome (for Firefox works fine).
Any other selectors, even for contents of <foreignObject> work fine.
Is there any tag-specific selector in Chrome for this case?
Upd:
As Rob W mentioned in comments, there is a known bug in WebKit.
Simple, yet in some cases not good workaround.
<svg>
<foreignObject class="ForeignObjectStubClass">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>foo</div>
</body>
</foreignObject>
</svg>
<script>
var T=document.querySelector(".ForeignObjectStubClass");
</script>
Using CSS class instead of tag name is enough
Edit, Updated
Try
var _T = document.getElementsByTagName("foreignObject");
// select `DIV` element within `_T` `HTMLCollection`
var filtered = _T[0].children.item("DIV");
console.log(filtered);
jsfiddle http://jsfiddle.net/guest271314/htp4hqe2/2/
See ParentNode.children , HTMLCollection ; see also NodeFilter
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;
});
}
PROBLEM:
I'm using Snap.svg to create some basic interactive graphics, but for some reason I can't get my external SVG file to load using Snap.load(). I've pulled code straight from the tutorial at snap.io and checked and double-checked the docs. My SVG file renders in the browser fine, it just doesn't display inside the Snap SVG. Other shapes (i.e. not pulled in using Snap.load() ) do display.
CODE:
I've boiled my example down to the most simple HTML and SVG files imaginable, and the Snap.load() method still isn't working for me. Does anyone see what I'm missing?
HTML:
<head>
<style media="screen">
#svg {
width: 300px;
height: 300px;
}
</style>
<script src="snap.svg-min.js"></script>
<meta charset=utf-8 />
</head>
<body>
<svg id="svg"></svg>
<script type="text/javascript">
var s = Snap("#svg");
Snap.load("svgtest.svg");
</script>
</body>
SVG (originally exported from Illustrator):
<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="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<rect x="14" y="33" fill="#2BB673" width="70" height="30"/>
</svg>
UPDATE:
Updated the code as per #Ian's suggestion -
var s = Snap("#svg");
Snap.load("http://www.w3.org/TR/SVG/images/struct/Use01.svg", onSVGLoaded ) ;
function onSVGLoaded( data ){
s.append( data );
}
- but still no display of external SVG. I tried using an SVG from w3.org just to be sure it wan't a problem with the file itself or my domain.
The load function takes a callback, as loading can take some time. So I think you would do something like the following...
var s = Snap("#svg");
Snap.load("svgtest.svg", onSVGLoaded ) ;
function onSVGLoaded( data ){
s.append( data );
}
Edit: There may be some access control issues if not accessing from the same server as the script, check the console log for any errors.
I was having exactly this problem in Internet Explorer only, and it turned out to be because the SVG file I was loading in was a minified one from which the doctype had been removed. Other browsers were ok without the doctype, but leaving the doctype in fixed the problem in IE as well:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
In case, like me, you're using Grunt to minify SVGs, you can leave the doctype in by adding the following option to your Gruntfile:
svgmin: {
options: {
plugins: [
{ removeDoctype: false }
]
}
// etc...
}
There is a small bug in the distribution - see https://github.com/adobe-webplatform/Snap.svg/issues/196. The suggested fix works correctly. The online demo works because it is referencing a much older build of the library.
With version 0.5.1 installed. The code in the correct answer above needs to be re-written as follows to work:
var s = Snap();
Snap.load("svgtest.svg", onSVGLoaded ) ;
function onSVGLoaded( data ){
s.append( data );
}