I am having issues embedding SVG into a webpage. I have found the simplest method to just use an image tag. For example:
<img src="my_graphic.svg" height="100"/>
Works in web-kit. I do not need to explicitly set the width and the browser will maintain the aspect ratio. Very nice!
This doesn't work in Firefox though - it's not cross browser. So how about embedding as an object?
<object type="image/svg+xml"
height="100"
width="554"
data="my_graphic.svgz">
<span/></object>
This time I'm using svgz and the mime type has been added and voila! It works in both firefox and webkit. However, in webkit I need to explicitly state the width or we get some nasty containing element scrollbars. But what's worse is the background is no longer transparent. It's rendered with a white background.
So one method works perfectly in webkit. The other works perfectly in mozilla. What can I do to get it working reliably in both?
Interested in a demonstration of this? See my link for reference:
http://sumocreations.com/demo/svg/new_dttg.html
I don't believe it's currently possible for the <object> to have a transparent background in WebKit. There's a bug filed for this problem. I don't know of a workaround.
The only work around I found was by detecting whether an img utilizing an SVG source is rendered properly. I do this by only specifying one dimension. Either the height or the width but not both. I can then test if the alternate dimension is greater than zero. If it is I hide the the object. If not I hide the image. Here is how to do it with jQuery:
<script type="text/javascript">
$(document).ready( function() {
if($('img.logo').width() < 1) {
$('img.logo').hide(); $('object.logo').show();
} else {
$('img.logo').show(); $('object.logo').hide();
}
});
</script>
See the demonstration: http://sumocreations.com/demo/svg/new_dttg.html
Place an <img> tag inside your object.
The object will render in firefox, and webkit should show the <img> tag.
Edit:
Also, what's up with the self closed span tag? <span> does not support self closing.
Related
As part of a project of mine, I need to dynamically create a canvas and then draw an SVG file (also dynamically generated) in the canvas. For my project I need the canvas to cover the whole page and the SVG to fill the whole canvas. In the interest of browser comparability I set the SVG width and height to the canvas width and height respectively (to deal with this know Firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=700533 as per this answer https://stackoverflow.com/a/28692538) yet the canvas is still blank in Firefox (works fine in Chrome, Safari, and Opera). I was wondering anyone could shed some light on this problem.
I made a fiddle with a demo (not my real SVG file but the same method and the same problem). Just to show the problem is not the the SVG if you copy it out of the alert and paste into a new Firefox tab it renders just fine. My Firefox version is 47.0
This should be the part of the code that is the most important.
img.onload = function () {
ctx.scale(ratio, ratio);
ctx.drawImage(img, 0, 0);
}
svg = "data:image/svg+xml,"+ "<svg xmlns='http://www.w3.org/2000/svg' width='"+canvas.width+"px' height='"+canvas.height+"px' viewBox='0,0,"+canvas.width+","+canvas.height+"' >" +
"<style type='text/css'> * { margin: 0; padding: 0; } p{background-color:blue;}</style>"+
'<rect x="10" y="10" width="100" height="100"/>' +
"</svg>"
img.src = svg
Full fiddle demo of the problem: https://jsfiddle.net/9are9tzx/5/
Thank you!
Your demo is working fine for me in FF. I see a black rectangle.
Did you accidentally use an SVG in your example that works?
If some other of your SVGs don't work, it may be because of a common issue people strike when working with SVG DataURIs in Firefox: the hash/pound symbol (#).
Technically '#' is a reserved character in URLs. It marks a fragment identifier. It appears in SVGs both as a fragment identifier (eg. url(#mygradient) and in colours (#ffcc88).
Chrome and other browsers are more forgiving if there are '#'s in the DataURI, but Firefox isn't. This is not a bug in Firefox. It is behaving correctly.
The solution to this is to escape any '#'s in your SVG the way you would any reserved URL characters - by using percentage encoding. For '#' the encoding is %23.
I am looking for solution, but can't find anywhere. I have block and I have other block under it. The first block has style "opacity: 0". So he is at the top of the other block and in that block (which opacity is 0) has few elements. The problem is there, that mozilla opacity: 0 accepting as display: none and i don't know why is that.
any solutions?
If you set the opacity of the parent to 0, then all his elements will be hidden.
Maybe tell us what are you trying to do and we'll try to find a better idea that will answer the terms.
First of all, your JSFiddle - jsfiddle.net/5zWZe/1/ doesn't use opacity. So this example seems unrelated to your question.
For an example with a button covered by a div, see this JSFiddle - jsfiddle.net/X7S3w/2/. As you can see, the button isn't accessible through the div, even if you reduce the opacity to 0. Also note, the behaviour is the same in either Firefox or Chromium.
It seems, you have a special case with an iframe and flash video. See this other JSFiddle - jsfiddle.net/X7S3w/3/ with identical CSS, but the button replaced by an iframe. Here the flash video is accessible, although the div is above the iframe. But again, same behaviour in Firefox and Chromium.
Covering the iframe/flash video with the div seems to work, when you modify the query string of the youtube URL and append ?wmode=transparent
<iframe id="without" src="http://www.youtube.com/embed/5f-n3-pV81A?wmode=transparent"></iframe>
<div id="opacity">opacity</div>
See this JSFiddle - jsfiddle.net/X7S3w/4/ for a working example. Now the div blocks the flash video successfully. And again, this works identically in Firefox and Chromium.
So it seems this is more a flash issue, than some CSS opacity behaviour.
In the following script, the area tag defined as a clickable area inside the center of the image-map.
The alt tag specifies text for the area, and the zoom property controls the magnification level to 50% zoom out of the original image:
<style type="text/css">
#myimg {zoom:50%; -moz-transform:scale(50%); -webkit-transform:scale(50%);}
</style>
<img src="http://www.content.onemexico.net/rosa.jpg" id="myimg" width="640" height="640" usemap="#themap">
<map name="themap">
<area shape="rect" coords="240,240,400,400" alt="RosesByAlt" title="RosesByTitle" href="#">
</map>
The description text for the clickable area is showing up in all major browsers except Internet Explorer (IE-9).
I tried the title attributes instead the alt, but still the text doesn't appear.
Please anybody can help make the description text to appear for clickable area with the zoom property using Internet Explorer.
IE9 works with the standard CSS transform property. It needs a prefix, but it does support it. So if you're just trying to support IE9, you don't need the zoom at all. You should be able to do this:
#myimg {
-ms-transform:scale(0.5);
-o-transform:scale(0.5);
-moz-transform:scale(0.5);
-webkit-transform:scale(0.5);
transform:scale(0.5);
}
If you need to support IE8 or earlier, then you'll need the zoom or something similar, but beware that zoom is not the same as scale; it may have some similarities on the surface, but it works quite differently, and you will get some weird effects if you use it.
So I would recommend not using zoom at all, even for old IE versions. You'll be better off using either IE's matrix filter or a polyfill script to backport support for the transform style into old IEs. The answers provided here may help you
Also note that I've added the un-prefixed version of the property as well: you should always provide the un-prefixed version of all properties, even if no browser supports it yet, because at some time in the future they will all drop support for their prefixed version, at which point your code will break if you haven't got the standard version in there.
I have made an svg image that I am using as a background image. I does not work in IE8 and below (as expected), and I thought I could use something use like: http://twostepmedia.co.uk/svgeezy/ or http://code.google.com/p/svgweb/. However, none of these support SVG as a background-image/background, only IMG and Object etc.
Code:
background:url('img/bck_hero.svg');
How can I get an SVG as the background in IE8/7 or have a fallback image? Is there a javascript library that could do this?
Thanks a lot,
Harley
One way is to detect support for svg with javascript and then style differently depending on that.
If you use modernizr you could do it like this in your stylesheet:
#myElm.svg { background:url('img/bck_hero.svg'); }
#myElm.no-svg { background:url('img/bck_hero.png'); }
Given the SVG file at http://dpaste.com/756156/ when I display it in a <object> or <embed> tag, about half the time it loads in Firefox the bottom portion of the image is cut off. Using inline CSS renders it fine, and Chrome and IE9 render properly as well.
I've seen suggestions to add width and height attributes of "100%" to the SVG tag, but that hasn't helped. Any ideas?
Having just suffered this issue myself [svg being clipped in firefox] I found a solution.
It's a bit random and has no logic, but it fixed the issue for me.
My svg was a simple "cloud" shape drawn with Illustrator using bezier curves.
No matter how many times I drew it, the right-hand side (kind of a bubble shape) was being clipped by the browser. No amount of adjusting parameters (such as viewBox, x, y, width, height) would fix it. - It was still clipped. In fact by adjusting these parameters it became obvious that it wasn't caused by any of them.
The solution was to add more data to the curve. I simply added another anchor-point on the curve that was being clipped, and hey presto it rendered properly in firefox.
Random but true. Hope this helps
This might be caused by Firefox rendering the SVG before loading the stylesheet, then not realizing that it needs to update it. Try changing the classname of the SVG tag in the onload event (JavaScript), as suggested by this page: http://ajaxian.com/archives/forcing-a-ui-redraw-from-javascript
If that doesn't work? Try completely regenerating the element with elm.parentNode.innerHTML += '' as suggested in the comments to this StackOverflow question: https://stackoverflow.com/a/2922034/638544
This is what worked for me, after dealing with multiple chart libraries.
First, set the chart's SVG to visibility: hidden; in the CSS eg.(#pie_chart .ct-chart-pie {visibility: hidden;} )
Then re-render the chart and change visibility to visible.
function show_popup(){
Chartist.Pie('#pie_chart', data, options, responsiveOptions);
$("#pie_chart .ct-chart-pie").attr("style","visibility:visible !important;");
};
window.setTimeout( show_popup, 1 );
This was fixed recently by bug 1063073. The fix will appear in Firefox 34, after that workarounds will no longer be necessary.