I have some inline SVG code thats generated at run time. For some strange reason I get incorrect results in chrome compared to other browsers.
Here it is in chrome..
If you look at the further right circle, you will see I have it highlighted in chrome inspection tools, that its what the box box is. Looking at the inspections bounding box, it clearly thinks that the svg is in what I would consider the correct position(end of the line), the svg code itself is also correct(e.g. the coordinates used)...however the actual circle is drawn out of its area.
Here is exactly the same in firefox...
Again i have it highlighted in the browsers inspection tools and you can see the circle is exactly where it should be.
Curiously the distance away from its 0,0 (the left most circle) seems to affect how offset the rendered circle is. Here it is again in chrome and you will see its not offset the same amount
I have removed all css (its on in the pictures to make it clearer) and that didn't help.
The fact that its fine in Firefox no matter what, and the chrome inspection tools show its boundary correct leads me to think its a bug / difference in the way it handles svgs in chrome?
If anyone has any suggestions I would very much appreciate your input.
thanks
EDIT: Heres the SVG code:
<svg width="57.59424px" height="57.59424px">
<path d="M28.7969 28.7969 l1351.0526 31.115000000000002" style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 2px; opacity: 1; stroke-dasharray: 0;"></path>
<circle class="markup-leader-handle markup-leader-start-point" cx="28.796871185302734" cy="28.796875" r="8"></circle>
<circle class="markup-leader-handle markup-leader-control-point" cx="704.3231843241383" cy="44.35441137083379" r="8"></circle>
<circle class="markup-leader-handle markup-leader-target-point" cx="1379.8494974629739" cy="59.911947741667575" r="8"></circle>
</svg>
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.
I'm trying to apply a clip-path to an image. I want the bottom right corner to be covered by a triangle. I've got this working in Firefox, Chrome and Safari. But I can't seem to get it working in Internet Explorer. Despite searching intensively I don't seem to be able to get a definite answer on the issue on how to implement this for IE. Some sources say do it like this (and I see this working in IE11)... Others say it's not supported. Makes me confused. Maybe someone can help me based on the following code sample of the styles and SVG I use. Thanks in advance!
.clip {
-webkit-clip-path: polygon(0 0, 349px 0, 349px 128px, 297px 233px, 0 233px);
clip-path: url("#clipPolygon");
}
<svg width="349" height="233">
<clipPath id="clipPolygon">
<polygon points="0 0, 349 0, 349 128, 297 233, 0 233"></polygon>
</clipPath>
</svg>
IE will apply a clip-path to an SVG <image> element. It will not, however apply a clip-path to an HTML <img> element or a background image or anything other non-SVG element.
Safari and Chrome have the same limitation at the moment FWIW but they support -webkit-clip-path which does work on HTML elements, which is why your example works there.
Firefox supports clip-path on non-SVG elements which is why it works there.
Safari 6.1.5 is not displaying a pattern in an SVG rectangle. I've finally simplified it down to this test case:
<html>
<head>
<style>
.patterned { fill: url("#myid") none; stroke:blue}
</style>
</head>
<body>
<svg width="2880" height="592">
<defs>
<pattern id="myid" patternunits="userSpaceOnUse" x="0" y="0" width="20" height="20">
<circle r="10" cx=12 cy=10 fill="purple">
</pattern>
</defs>
<rect class="patterned" height="27" width="58">
</svg>
</body>
</html>
Safari displays an empty blue outline, while Firefox and Chrome show polka-dots inside it. I have the same problem with the diagonal hatch pattern I'm using in the real thing.
I actually stumbled on a strange workaround that works for this snippet but not for the real thing: changing none to yellow after the url shows purple circles on a white/transparent background on all three browsers. Unfortunately, when I do that in my real application I get a yellow background and no pattern.
I now think my test case is a red herring; it fails for a different reason than my real web site fails to show the pattern. Safari can be made to produce the same result as the other browsers just by deleting the none after the URL. (Possibly a bug in Safari; see other answer.)
Unfortunately, that just means I failed to reduce my real problem to a small test case, because the real thing still doesn't work. After more experimentation, I found that I can break the corrected test case by adding a <base> element to the header. Presumably Safari doesn't resolve the url("#myid") correctly. (Also, Firefox and Chrome seem to resolve it differently if it appears in a file called styles/style.css; Chrome apparently uses the main document as the base, Firefox apparently looks for the {{defs}} in the style sheet.)
And yet Safari does still work if I serve the same the corrected test case as http://localhost:3000, so it's not as simple as file: vs. http:. It must be something else, somewhere in the huge complex web app I've taken over developing. I've now tried three times to isolate the problem by deleting elements until the pattern works (which is how I discovered that Firefox doesn't like the style being defined from another folder), but I've had no luck in isolating the problem with Safari.
I've given up for now and taken a different approach to get the visual effect the designer wants.
Say a have a div, and that I rounded its corners so it became a circle. Now, I want to apply the :hover pseudo-element to it. But I have other elements surrounding it, which in turn have :hover effects themselves. I only want the hover effect of the circle to activate if the mouse is effectively inside the circle.
To illustrate this problem:
The square was my div, and the circle how it looked after rounding its corners. Pretend that the black areas are in front of other elements, whose :hover effect I also want to be able to use. If I apply the hover pseudo-element to the circle, when the mouse is in a black zone, the circle's hover effect will be activated, and not the one of the element behind the div...
How to (if it can be done) solve this problem?
I did a little test on the latest versions of Chrome, Opera, Firefox, IE and Safari; besides Opera*, the browsers seem to work as you would wish.
Opera doesn't, and that's due to faulty browser implementation, and should be filed as a bug. The specs are pretty clear on this point:
Also, the area outside the curve of the border edge does not accept pointer events on behalf of the element.
P.S. (The :hover is a pseudo-class, not a pseudo-element)
* When I originally made this post I tested the issue on the latest version of Opera on Linux which currently is 12.16. As King King pointed out below, this is not the latest version on other operating system, where the test works fine.
If you are able to use SVG your element will be whatever you define it to be, and it's bounded by the border shape/size of your of your specs. So in your case a circle you can do something like this:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="50" y1="50" x2="50" y2="50" stroke="red" class="circle" />
</svg>
and then style it with css:
.circle:hover {
stroke: blue
}
jsfiddle
I don't have any problems using clip-path with links to .svg files in Firefox, but Safari seemingly refuses to use them.
If you load my WIP page http://www.omakadesign.com in Firefox, you will see a butterfly pattern at the bottom of the menu, but if you load it in Safari, the menus are completely rectangular.
The relevant line appears in main.css (221) and looks like:
clip-path: url("../img/menu-news.svg#news-clip");
There seems to be very little information about clip-path and Safari, and not many questions about it on this site either (believe me I've looked). But then again, I can't even get the most basic inline svg example with clip-path to work even in Firefox, so perhaps there is something fundamental I'm missing on this topic?
(Also, though this is another subject, why these menus have both padding and margin on the bottom is a mystery to me since I zero them out using min-width...)
UPDATE:
I did a test and created a .svg with a mask tag in it and replaced the clip-path line that appears above with a css mask instead (still 221 if you want to try it with the Firefox Style Editor) and amazingly that still works in Firefox and Safari STILL skips over it:
mask: url("../img/menu-news-mask.svg#news-mask");
(Final update: Found the solution, but I'm not allowed to post it for another 5 hours... turns out, you have to use very, very specific SVG and use -webkit-mask for Safari.)
I found the solution. You have to use VERY SPECIFIC SVG code! Follow the example of this guy to the letter, and clipping will work in Safari too:
https://github.com/Modernizr/Modernizr/issues/213#issuecomment-1149691
(Sorry about posting my own answer for my own first question, but I was really desperate and I usually find that when you start asking others, that's when you stumble upon the solution...)
EDIT: Doesn't work in IE9, which I don't really care about, but just a heads up for those who do (the fallback is simply a plain rectangular menu for me which still works).
Thank you for having that link to Modernizr's github!
For a note on if you are clipping an image, what's important is the path has to be inside the clipPath.
On a side note, if you export your SVG Code from Illustrator. Just make sure to use the actual path instead of this:
<defs>
<path id="path" d="....">
</defs>
<clipPath id="clipping">
<use xlink:href="#path"/>
</clipPath>
<image clip-path=url(#clipping) ...>
to the actual path like this...
<clipPath id="clipping">
<path id="path" d="....">
</clipPath>
<image clip-path=url(#clipping) ...>
It will work in FF, Chrome, Safari, Opera and IE9 & 10.
Here's the jsfiddle
Edit
The original issue now I realized is a slightly different problem than what I had... Which is using the svg path to clip an image outside of the svg as an img tag. Unfortunately, IE, even 10 didn’t work when I tried the exact same method. Therefore, if you have have a single image, best is to embed the image inside the svg itself instead of clipping an img tag with the path. That worked for IE9&10 and then some..
For second part of your question (..why these menus have both padding and margin on the bottom..) :
main.css line 95
nav a {
background: none repeat scroll 0 0 #616161;
color: white;
display: block;
font: 12px/20px Lucida Sans Unicode,Lucida Grande,Lucida Sans;
margin-bottom: 10px;
padding: 15px 0;
text-align: center;
text-decoration: none;
}