Okay here goes:
This is my webpage: http://ingenious.jit.su/themes
If you view it in firefox you'll notice the top right corner of each of the six white panels features a small red icon (svg). If you view that image, you'll notice it's original size is 640 by 480. It's small because there's a css rule changing the size of the img tag the svg is referenced within.
Here's the bug: IE9 isn't resizing the icon according to the css rule. It's just clipping the top left bit of it. If you adjust the css rule with the IE9 Developer Tools you'll see what I mean.
I dug around lots and confirmed that I had been following most of the svg best practices, like including width and height values that aren't just 100%, including a viewport, and so on, but no luck. IE9 still responds to the css rule by clipping instead of scaling.
Any help would rock!
Update Fixed! I'm dumb, my viewport was missing. No more coding at 3am.
did you link the svg?
example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
enter svg here
</svg>
I had a lot of svg trouble with ie9 to:)
I got this error when viewing the page if this helps
SCRIPT438: Object doesn't support property or method 'addEventListener'
followbar.js, line 3 character 3
here is a better example of the two dots i was talking about in the comments
<img class="theme-icon" id="/recruitment-and-retention" src="../images/recruitment-and-retention.svg"/>
Related
I have an SVG image with clickable SVG polygons on it and some hover image effects on top of that. works perfectly fine in every browser, except - of course - in IE. actually edge (12 + 13) and IE 11 are fine. Even IE10 (Metro) - but not IE10 Latest (as tested in Browserstack).
Since this has to be seen with the images I put up a working example here (well working apart from IE10):
SVG clickable images
so following that link you can see what it should look like (again, except IE10) and this is a screenshot from Browserstack of what it looks like in IE10 Latest:
So in this specific case, the black & white-image (background) - instead of having a 7.5% margin-left and 85% width like the rest of the svg stuff - is resized by the height, which seems to be 100%, thus resulting in incorrect layering of the SVGs.
i really don't know what's causing this - any help is much appreciated!
It looks like you are only supplying a width for the <svg> element (ie. no height). So it is probably IEs SVG scaling bug that is your problem. See the following question for a workaround.
SVGs not scaling properly in IE - has extra space
I would like to achieve the above. The image is clipped, then there is a surrounding border around the image, which is clipped as well. I have actually done it for Chrome and Firefox using CSS clip path - http://staging.web2-hk.redantdev.com/plukka-html/about.html
The clip path property for complex shape isn't supported in any IE - http://caniuse.com/#feat=css-clip-path.
I would like to know another technique to make this work in IE Edge at the least.
I have defined an SVG clipPath and am applying it to a few DIVs on my page. It works/displays as expected in FF, but in Chrome and Safari (all latest versions), it seems that the clipPath will only affect an HTML element if the HTML element is positioned in the top-left corner of the page.
SVG Object
<svg height="0" width="0">
<defs>
<clipPath id="clip">
<path fill="#000000" d="M0,0.01c3.472,1.088,6.688,3.663,7.878,9.208c1.604,7.482,4.305,11.862,7.102,11.79v0.003
c0.007,0.001,0.014-0.001,0.02-0.001c0.007,0,0.014,0.002,0.021,0.001v-0.003c2.797,0.072,5.499-4.308,7.103-11.79
C23.312,3.672,26.527,1.098,30,0.01H0z"/>
</clipPath>
</defs>
</svg>
CSS for element to be clipped
.clipMe {
background: red;
width: 30px;
height: 21px;
clip-path: url(#clip);
-webkit-clip-path: url(#clip);
}
JSFIDDLE
I believe this article begins to address this by use of coordinate systems, but I got lost/confused very quickly several times. It sounds like it's saying that using different units of measurements and coordinates, it's possible to apply a clipPath to any HTML element... but I'm really not sure.
I exported my clipPath from Illustrator so if there were different units/coordinates that need to be used, I'm not sure how I'd go about doing it.
In Chrome and/or Safari, has anyone successfully applied an SVG clipPath (that was an actual path - not a polygon or ellipse) to an HTML element located somewhere other than the top left of the page?
I think PaulOB's responses over at SitePoint wraps this issue up pretty nicely. Long story short: support for applying an SVG clipPath to an HTML element is not quite there for webkit browsers yet.
while I was looking for the answer to this question I came across your question. I found all of the answers including the: "you just can't" answer to be a little bit of a cop out.
I kept trying, and what I found is this:
When you have an svg clipPath it is not position-able as far as what I can tell, BUT if you take into account that you can toss it into an iframe and then position the iframe, you're golden.
I am including a link, and I am not sure how long it will be in place before it 'explodes' because I am not the owner of the server.
example
The contents of that link are fairly self explanatory, and if it's not up anymore then message me or respond to this post and I will put an update on my own server somewhere.
The issue in Chrome and Opera has just been fixed and will roll out in the next few weeks. The browser was indeed always applying a reference clip at the page origin. The new behavior should match Firefox.
I can't seem to find out why some images at a project of mine (http://www.de-drie.nl) have a strange (grey?) border at the bottom. Could it be since the images aren't scaled? I have scaled them to fit content with css.
At first this problem was there in: FF, Chrome, IE and Safari. After playing a bit with the width (in css) of the images the strange border disappeared in FF.
The other browsers are still showing the border problem.
I have seen multiple posts here at stackoverflow which describe the same kind of problem.
The solution should be display:block or vertical-align:bottom, but this really doesn't seem to work for my problem.
All your images with grey border in the html, literally the actual images contain a small grey border underneath
For example this: http://www.de-drie.nl/images/uitbouw.jpg contains this:
I have a issue specific to Webkit browsers (Safari & Chrome, on Mac & PC).
I'm using Raphael JS to render SVG data and using a responsive layout to scale the SVGs with the browser window. The SVGs are set to 100% width/height using JQuery. The containing elements have their widths set in percentages to maintain the ratios of the layout as the page resizes.
Trouble is Webkit doesn't calculate the height correctly, it adds extra pixels (sometimes hundreds) around the SVG image; which breaks the layout.
If you open the following link in a Webkit browser you'll see the green extra pixel areas. If you use the developer inpspector in safari you'll see the reported size for the SVG is bigger than the SVG displayed.
http://e-st.glam.ac.uk/simulationgames/svgheightbug/index.html
If you open the link in Firefox or Opera you'll see the layout as it should work (the green here is caused by margins I have deliberately set).
IE8 was having a similar problem which using height:auto fixed, but this won't work in Webkit.
Has anybody else had this problem? Anybody have a solution?
I think it may be a Webkit bug (checked the nightly build already, issue persists), but before I log it I thought check to make sure nobody else has a solution first.
svg { max-height: 100%; }
WebKit bug documented here: https://bugs.webkit.org/show_bug.cgi?id=82489
I also added the workaround to the bug tracker.
I had a similar problem for Safari. Case was that the svg width and height were rendered as dom element attributes (in my case width="588.75px" height="130px"). Defining width and height in css could not overwrite this dimension setting.
To fix this for Safari I removed the width and height information from the SVG file while keeping viewBox intact (you can edit .svg files with any text editor).
Git diff snippet of my .svg file:
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 588.75 130"
- height="130"
- width="588.75"
xml:space="preserve"
version="1.1"
I just set the height to a very large size in the svg to maintain the aspect ratio. Using 100% comes with too many problems. This works better for me because I did not want to use js.
Full props to:
http://www.seowarp.com/blog/2011/06/svg-scaling-problems-in-ie9-and-other-browsers/
width="1200" height="235.5"
It's hard for me to understand exactly what you want with your example, or what is not as you intend it. However, in general, if you are using a layout with percentage widths and height containers and you want content to fill those containers, you need to take them out of the flow (using position:absolute on the content and position:relative or position:absolute on the containers).
Here's a simple example that works find in Chrome and Safari:
http://phrogz.net/SVG/size-to-fill.xhtml
The #foo div has its height and width as a percentage of the body. It has a red background that will never be seen because the SVG is position:absolute inside it and set to fill it completely, and have a green background. If you ever see red, it is an error.
#foo, svg { position:absolute }
#foo { left:20%; width:30%; top:5%; height:80%; background:red; }
svg { top:0; left:0; width:100%; height:100%; background:green; }
<div id="foo"><svg ...></svg></div>
This is a known issue that has been fixed by the Chromium team with version 15.0.874.121. I verified this fix myself just today.
http://code.google.com/p/chromium/issues/detail?id=98951#c27
i know how to fix it, you have just to put this at the begining of your svg file: "preserveAspectRatio="xMinYMin none" it must be into svg tag like this:
Problem will be fix
As previously pointed out WebKit's scaling of SVG improved recently. It is still quite broken in the current Safari (version 5.1, WebKit 534), in my opinion. I did a few experiments and recorded my findings on my website:
http://www.vlado-do.de/svg_test/
In short: embedding svg with <object> works under most conditions in WebKit 535. For older WebKit I embed it in an <img> tag. That's fine if you don't want links inside your svg (but it does not work in older Gecko and strangely also is problematic in current Chromium).
I found that adding "position: absolute;" to the image element (if it's within a parent that's also absolutely positioned), which had my .svg being called, made the "height: 100%;" declaration become relative to its container instead of the page/browser/device.
Tested this on both Chrome and Safari (mobile webkit) for iOS 7.1, and it fixed my problem (the .svg file was going way outside of its container).
Hopefully this a somewhat reliable fix for others here who were having trouble. Worth a shot?
I was having a problem with Javascript returning incorrect "height" values for SVGs, and I found the solution was simply to run my script (the bit that needed to access the height) on window.load rather than document.ready.
document.ready fires when the DOM is ready, but images have not necessarily been rendered at this point. At the point where window.load fires, images will have been loaded (and thus the browser will be able to access their dimensions correctly).