I found an answer on here that I dont understand. Unfortunately i am unable to comment yet.
Here is the link to the answer, SVG renders but gets cut off in Firefox only - why?
The Accepted answer by Boris Zbarsky has a description on why it is not working. I do not fully understand this answer and wondering a way to correct this issue so I can make it work on Firefox.
For my case, the SVG text element is there on all browsers,
In Internet explorer all 3 texts are visible,
In Firefox and chrome any of the SVG text elements are cut off if they are more than 1/4 to the right of the screen. If I move them through the developer tab to the left of the imaginary cut off they show up.
There is no div or block along this strange area that could be hiding the SVG text.
This is a local implementation.
Any help on what is happening would be very helpful.
I had similar problem. Try to add css property:
overflow: visible
I had the same problem, turns out there was a clip-path in one of the tags.
<g id="undraw_the_search_s0xf 1" clip-path="url(#clip0)">
If you remove that it should render the full SVG.
The x coordinate on the text element was larger than the width css that was applied to the parent SVG element.
Such a simple problem that had me running in circles for hours.
I was able to fix this (or a similar issue) by adjusting viewBox:
<svg viewBox="0 0 100 100"
I played with the 3rd and 4th parameters and bringing them down to ~60 fixed it for me.
Reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
In our case it is due to we render many SVG icons in one page, and they have the same clipPath id, when rendered in the same page, they will use clipPath from another icon.
Find out more about clipPath here https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath
I had a similar issue. My <svg> block fully renders in IE9, but is slightly cut-off in Chrome.
Fix:
<svg width="100%"></svg>
I had the same problem as well, and style="overflow: visible" did not work for me. Try adjusting your viewBox values if other attributes don't work.
<svg width="12" height="12" **viewBox="0 0 11 15"** fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.11598 6L0.557983 10.558L1.44198 11.442L5.99998 6.884L10.558 11.442L11.442 10.558L6.88398 6L11.442 1.442L10.558 0.557999L5.99998 5.116L1.44198 0.557999L0.557983 1.442L5.11598 6Z" fill="#11142D"/>
</svg>
You can know more about viewBox attribute values here
I had the same problem, It was for a logo and to solve the problem I just needed to add more space to the right edge of the artboard within illustrator. Firefox was clipping the right side of the artwork by a fraction.
Firefox expands the content & If you don't have enough space/width at the edges of the content within the artboard it will be clipped by the artboard bounds (edge of space where content renders).
Solution: The Artboard size created in illustrator needs to be bigger around the artwork bounds to provide more space around the content in Firefox.
I had the same problem in Firefox 93.0. Included a SVG image, that was nicely displayed in all browsers. Even in Firefox, but not when I added width="100%". The problem was, that I inserted the SVG as <img> istead of an <object>.
That was my solution:
<object data="./vectorized-graphics-file.svg" type="image/svg+xml" width="100%">
<!---Fallback--->
Your browser can't display SVG graphics.
</object>
I tried some suggestions above such as adding overflow: visible and that didn't work. But I also removed clip-path="url(#clip0)" from and it seemed to render the full SVG fine again.
I had the same issue in one of then SVG icons, I used the overflow-visible class from tailwind css but it didn't worked for me. I would suggest you to try adjusting your view box for the following issue for getting it work viewBox=" 0 0 22 22"
Related
I am trying to make custom CTA buttons that are created through SVG shapes - I tried with CSS, but this way(SVG) I am not falling into box-model issues of activating the button when hovering outside of the shape.
The problem is that text dipslayed through foreignObject nested in SVG elements:
<foreignObject x="5000" y="0" width="10000" height="17320.5">
<div xmlns="http://www.w3.org/1999/xhtml">
<h2>M1</h2>
</div>
</foreignObject>
is being displayed differently in Chrome and Firefox. It is perfectly visible on Chrome, but Firefox scales it down and is not responding to further font-size change to bigger sizes.
image presenting the issue
I created this codepen code snippet to demonstrate the problem.
I tried working around foreignObject with SVG text element, but I encountered another issue - Firefox ignores or miscalculates dimensions of the nested SVG elements.
Screens of different sizing of the same SVG nested element - Chrome, Firefox
Have anyone faced such problem? I need to present consistent font-size on these buttons on both browsers (scaled font on FF is barely visible) and I want to avoid absolute positioning html span elements over these SVG buttons - this would present 2 separate buttons, one of text and one of an image to users and web crawlers.
With reference to the question clip-path not working in SVG sprite, it seems we can't use style="display:none" to hide an SVG element that defines a clip path that will be used elsewhere.
However, the suggested alternative for hiding it given (using width="0" height="0") is not working for me (at least in Chrome, the SVG element still gets allocated space in the page layout, which causes a vertical scroll bar to appear, as I have a div with height="100%" above it). What other was are available for hiding an SVG that won't stop it being used for clipping?
In the end, I used position:absolute to take the item out of the usual HTML document flow. I don't understand why a zero-sized element would cause scrollbars to appear, but that certainly seemed to be what was happening.
I have an SVG file which I display white normally, or red when the user hovers over it. This is made by having transparent areas of the image and using the following CSS & HTML:
a>img{background:#fff;width:32px;height:32px}
a:hover>img{background:#900}
<img src="blah.svg">
The problem is that I sporadically get very thin borders of white (or red) around the image. Different browsers/zoom levels/devices show different borders - sometimes none, sometimes some, sometimes all of them.
This would appear to suggest that the SVG file isn't quite "filling" the img tag.
I might assume that the problem is that the SVG isn't quite square, so it's not stretching perfectly to 32x32 pixels, but sometimes I get borders on all four sides, so it can't be that simple. (And indeed the SVG file has a viewbox of "0 0 195 195" and doesn't appear to have any points outside of that range.
It's worth noting that changing the dimensions to 39x39 pixels (a perfect divisor of 195) doesn't fix the issue, not that I expected it to, due to the vector nature of SVG.
Fiddle: http://jsfiddle.net/3wtazst8/1/
Any suggestions?
Thanks
I know this is over a year old, but I was having the same issue and considered Paul LeBeau's advice regarding extending outside the viewBox. Below is an example showing the issue and the fix.
Icons with background colors showing issue and showing fix
The badge icon does not show the bleed, while the medal icon does.
Side-by-side image of icons within viewBox and extended beyond viewBox
Viewing the left SVG in Illustrator, the background of the image goes to the very edge of the viewBox.
Viewing the right SVG in Illustrator, the background of the image extends beyond the edge of the viewBox.
Fixing your SVG so the background extends beyond viewBox will fix your issue.
So I've got a page on a site that displays exactly like it should in both IE and Chrome, but not Firefox. The link is http://www.jakerevans.com/?page_id=61. In both IE and Chrome, the spinning animation (written with D3.js) displays fully through the padding-left and padding-top, but not in Firefox. Anyone have any idea how I can make this padding in Firefox transparent? Any other possible solutions? I'd really like to resolve this through CSS if possible, and not go back to the drawing board with the D3 code. Obviously I will if I have to though.
Thanks a lot for the help!!!
You need to explicitly set overflow: visible on your <svg> element.
The SVG specifications state that all SVG elements that create viewports should have overflow: hidden in the browser's default stylesheet. However, browsers disagree over whether this should include the padding area or not: if you follow the description in the SVG specs, as Firefox does, padding would not be included. However, general CSS/HTML layout does not consider content in the padding to be overflow, so Webkit/Blink/IE browsers do not clip it with overflow:hidden.
it doesn't seem to be the issue of the padding, it's like to be the firefox transform origin thing, see this Setting transform-origin on SVG group not working in FireFox
See the problem in action: http://jsfiddle.net/krtGd/1/
I have an embedded SVG element in a floating div, something like this:
<div style="float: left;">
<svg width="50" height="20" id="svg1">
</svg>
</div>
This works fine; the div fits as expected around the SVG. However, when I resize the SVG with JavaScript, like so:
$('#svg2').attr('width', 50);
...the SVG resizes properly, but the box around it doesn't. As you can see in the jsFiddle, the same thing is true if the containing div has display:inline-block instead of a float style.
The weird thing here, and what's convincing me that this is a reflow problem and not a simple layout problem, is that if you inspect the either of the problem elements in the Chrome console Elements Panel, the div elements resize correctly. This problem may only apply to Google Chrome - I'm seeing it in Chrome OSX v.20.0.1132.57, but not in Safari. I haven't tested in FF or IE.
So: How can I force reflow in Chrome?
I have tried the usual suspects, including inspecting div.offsetHeight, svg.getBBox(), and several other variants.
Sounds like a bug in Chromium. When the intrinsic width/height of an svg element change, the layout width/height aren’t automatically changing. You can manually set the layout width/height though: .css("width", "50px"). Have you considered filing a bug with Chromium?