Please refer below SVG rectangle.
<rect id="container_svg_ChartArea" x="89.5" y="58" width="1240.5" height="448.5"
fill="transparent" stroke-width="0.5" opacity="0.3" stroke="Gray"/>
VML rectangle.
<v:rect
fillcolor="green"
style="top:1;left:1;width:50;height:50">
</v:rect>
Why can't I use x and y attribute in VML like SVG?
The above VML rect works in IE7 and IE5 mode and not showing IE7 browser with IE7 document mode. Why?
I found below link.
How do I get VML working in standards mode?
If I set position absolute means it will show rectangle in all kind of browsers with different kind of document code?
What is the reason? If am having more number of rectangle and path means need to set position absolute for all elements? How can I convert simple SVG code to VML code?
Related
I have been developing a web page "game" on my PC based in HTML, SVG, and Javascript. It has a large image of the earth loaded into the SVG views through the SVG <image> tag. Testing on my PC this works with no problem, however recently I published it to a public web page (http://rbarryyoung.com/EarthOrbitalSimulator.html) and discovered that only the bottom right quarter of the SVG is rendering on both SVG views on my iPhone and iPad. Like this:
At first, I thought that it was just the image in the SVG viewports, but then I realized that the entire SVG viewport was black except for the lower-right quadrant. The SVG viewport is correctly fully sized, it just appears as if there is some black mask over 3/4s of it (or only 1/4 of it renders).
Here's what I think are the relevant HTML code lines, the containing Div tag for the first SVG view (line 67):
<div id="divSvg1"
style="position:relative; z-index:1; margin:15px;
top:100px;
width:640px; height:640px;
background-color:black;
float:left;"
>
The SVG tag (line 104):
<svg id="svgEa"
style="width:100%; height:100%;"
viewBox="-7500 -7500 15000 15000"
preserveAspectRatio="xMidYMid meet"
clip-path="url(#svgEaClip)"
transform="scale(1.0,1.0)"
version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- NOTE: All internal units are in KM (or %) -->
And the embedded Image tag (starting at line 160):
<g id="gEaAll" transform="scale(1.0,1.0)" >
<!-- ... -->
<g id="gEaSurfaceFacingBottom" class="eaSurfaceFacing">
<g id=gEarthImage>
<!-- ... -->
<image x="-6413" y="-6413" width="12826" height="12826" href="eosImages/globe-arctic 8bit.png" />
</g>
</g>
The second SVG view is a shadowed (<use..> tag), zoomed view of the first with the same problem.
I have tested this on my PC, on both screens in Chrome, Edge, and IE, where it works correctly on all of them. I have also tested this on my iPhone with both Safari and Edge and my iPad with Safari, Chrome, and Edge with the same failure on all of them. I have tried just a bare <img> tag of the PNG file outside of SVG and that works fine on these platforms.
I do not have any Android platforms to test with, so if anyone wants to try it and let me know, I can add those results here.
I have researched this, and though there's a bunch of stuff about iOS not rendering images, mostly those are a complete failure to render, rather than this very specific partial rendering, and much less specific stuff about SVG differences. Ultimately I didn't find anything that seemed to be the same problem.
To summarize then, my question is: what is causing this problem or what have I done wrong, and how can I fix it? (I do understand that I will need to have a different style/CSS layout for mobile, but I still need to know what needs to be changed to make this render correctly)
Add X and Y coordinates for your <rect />. In your case, your Clip-Path Rectangle is not in an exact coordinate.
Here is the code working for me
<clipPath>
<rect x="-7500px" y="-7500px" width="100%" height="100%" />
<cliPath>
replace this code with your <clipPath> on line 114 and 301.
Here is the Screenshot
Moreover here is a live demo that worked on my Mac Safari as well in windows Chrome, where I took one part of your code.
Update
Check the answer by #fussionweb.
Orignal answer:
You can try the -webkit- prefix before clip-path. It seems to be a safari issue related to clip-path.
Background
The application UI is built in icefaces
As iceface works, a piece of javascript code is retrieved from the server, this code is run on the browser to update the svg element.Hence, svg is rendered
dynamically for the 1st time
Problem
Issue is with the <text> tag in the svg not rendering properly. The <text> tag does not follow the positions x,y as mentioned in its attributes. Instead it just stays at the origin(0, 0) because of which each of the text within different <text> tag overlaps over each other.
First rendering looks like this
However, the text gets positioned correctly automatically in the following cases:-
The size of the browser window is changed
Any of the elements in
the <svg> tag is altered via the developer tool
From the above 2 points it appears that the svg itself is not rendered properly at the first load(dynamically). As soon as we do any of above 2 points chrome renders the svg correctly.
Resizing windows/Altering any svg element in developer tool automatically fixes it to this
Queries
Is there a way to force reload svg in chrome?
What could be an alternative to using <text> tag for positioning text in the svg?
Any other solutions?
NOTE:-The same scenario works perfectly in Firefox !
Although the full svg code is quite big but here is the HTML piece responsible for rendering the svg text
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" minwidth="1" width="100%" x="0" y="0">
<g transform="matrix(57.22751322751323,0,0,57.22751322751323,360.6538835978836,26.883768888888916)">
<g>
<text font-size="1" style="font-family:'Arial', sans-serif; stroke:none; fill:black;" transform="scale(0.048895)" x="-10.779220779220779" y="2.1136363636363633">
<tspan x="-10.779220779220779">Overlapping text</tspan>
<tspan dy="1em" x="-10.779220779220779">Overlapping text</tspan>
</text>
<text font-size="1" style="font-family:'Arial', sans-serif; stroke:none; fill:black; font-weight:bold;" transform="scale(0.08001)" x="-6.587301587301588" y="-0.75">
<tspan x="-6.587301587301588">Overlapping text</tspan>
</text>
</g>
</g>
</svg>
I had the same issue. I think it's an issue with chrome (or chromium for Linux).
Just as a quick fix to get it working. My solution used Inkscape.
First, make whatever SVG you want with Inkscape with the centered text.
Then with the text selected press Ctrl + Shift + C. This will convert it from text to a path object sort of bypassing the chrome issue.
Not the best fix, I know but it works. Just a way to get it to work till it's fixed.
I also got this issue. But seems like this is due to the late loading of font used for text.
You can also try using two below properties:
1. textLength
2. lengthAdjust
I have a really simple loading animation that works perfectly on Firefox and Chrome, but in IE11 it's not showing the SVG figure.
Here is the full example:
JSFiddle sample
SVG:
<svg class="circular-loader" viewBox="25 25 50 50">
<circle class="loader-path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
</svg>
The animation, which is a rotation, is working on IE11, but the SVG, which is a circle, is not being displayed.
Any idea?
I just can't figure out what is not being supported by IE11.
Only Microsoft Edge will support SVG CSS Transitions and Animation.. especially stroke-dasharray.
Please see the Microsoft Developer Docs:
https://dev.windows.com/en-us/microsoft-edge/platform/status/csstransitionsanimationsforsvgelements
Allows CSS Transitions and Animations to apply to SVG elements.
Unprefixed version: Microsoft Edge build 10240+
As you can see in my fork of your example. You were not seeing the loader spin due to not having the stroke attribute on your circle element.
https://jsfiddle.net/z8w4vuau/50/
You can see how it can spin now. But you will have to check if the browser is IE and adjust your stroke-dasharray so it is larger dash. Since IE11 and below do not support animating SVG stroke-dasharray and stroke-dashoffset with CSS animation or transitions, unless it is Microsoft Edge build 10240+.
But if you need a cross browser solution to animate SVG, especially stroke-dasharray and stroke-dashoffset, then look into using a JS animation library like the GreenSock Animation Platform (GSAP). Using the DrawSVGPlugin
https://greensock.com/drawSVG
IE does not support CSS animation of SVG elements. It also doesn't support the standard built-in SMIL animations that SVG has.
If you convert your animation to native SVG animations, you could perhaps get it working using the FakeSmile library. Otherwise you will need to use some alternative fallback for IE - such as an animated gif or something.
IE11 supports CSS3 animations but not on child nodes of an SVG element. You can animate the SVG node itself so my solution is to break up the parts into separate SVGs and animate those with CSS3.
https://codepen.io/getsetbro/full/Bxeyaw/
This will even work if IE11 is in compatibility mode if you add the meta tag
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
For anyone having trouble with this, I have a workaround.
I had a full SVG with IDs and CSS animations, all working perfect for all the other major browsers.
I have my SVG inserted into the HTML, so I can access every item with CSS animations.
For this to work, you have to have your SVG with position:
absolute; top: 0px; left: 0px,
... inside a container .svgcontent (or whatever you want to call it)
Script:
var IE = (navigator.userAgent.indexOf("Edge") > -1 || navigator.userAgent.indexOf("Trident/7.0") > -1) ? true : false;
objs = [ '#file1', '#file2','#file3','#file4','#file5','#file6','#file7','#file8','#file9','#file10','#file11', '#bottom' ];
if ( IE ){
objs.forEach(function (item) {
item = $(item);
id = item.attr('id');
svgcontent = item.closest('.svgcontent')
svg = item.closest('svg');
svgattrs = ' width='+svg.attr('width')+' height='+svg.attr('height')+' '
html = '<svg id="'+id+'" '+svgattrs+'>'+item.html()+'</svg>';
item.remove();
$(svgcontent).prepend(html);
});
}
This takes all the elements in the objs array, and insert them as a full SVG behind the first one (you can change prepend to append to change this behavior).
And the SVG is going to have the same id as the object, so the CSS animate is going to apply to a full SVG, not an SVG object.
And that's it!
My problem is the following : I try to display an image in a SVG section thanks to the <image> tag. The following code is an example.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
<image xlink:href="http://2.bp.blogspot.com/-auWhmIJyACw/TaHzOV8pN1I/AAAAAAAAAPY/2nGmNaJRaBs/s1600/roger-federer-widescreen-wallpaper-001.jpg" preserveAspectRatio="xMinYMin slice"></image>
</svg>
My problem is that it doesn't work on Safari and Firefox. It seems to come from the image tag which is not working. I don't know if it's a syntax or a xlink error.
There is a codepen if you want to make your tests : http://codepen.io/vavouweb/pen/VaMNqg
In SVG 1.1 the attributes width and height are mandatory for images.
The unfinished SVG 2 specification proposes that requirement be removed but only Chrome and possibly IE edge have implemented that suggestion at the moment as far as I know.
Im using IE 10 here, firefox works fine, but no mask is showing in IE
<svg style="height:0;">
<mask id="m1" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
<image width="78px" height="78px" xlink:href="images/mask2.png"></image>
</mask>
</svg>
<img src="images/avatar-sample.jpg" style="mask:url(#m1);"/>
Only Firefox currently supports applying a mask directly to an HTML element. Other UAs only allow you to set an SVG effect such as a mask on an SVG object.
If you want this to work in IE you'll have to use an SVG <image> element to display the image rather than a HTML <img> element.