I have found an issue where trying to use pointer-events:none on SVG's in Safari 5.1.7 for Windows does not work, but works perfectly on div's. How would I go about detecting support for this using; Vanilla JavaScript or Modernizr to provide fallback for unique use cases like this. Here is a fiddle demonstrating the issue - http://jsfiddle.net/DLEsn/75/
<svg xmlns="http://www.w3.org/2000/svg" id="pass_through_svg">
<rect x="0" y="0" width="200" height="100" fill="rgba(0,0,255,0.4)"/>
</svg>
<div class="pass_through"></div>
<div class="red_block"></div>
Related
I'm creating a contact sheet that displays all the icons in a library. I've built it using nested SVGs. Here's a minimal version:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 200 200">
<svg id="sheet_core" width="200" height="200" x="0" y="0">
<svg width="200" height="200" x="0" y="0">
<symbol id="piece" viewBox="-2.5 -2.5 105 105">
<circle r="50" cx="50" cy="50" data-playerfill="true" fill="#ffffff" stroke-width="5" stroke="#000000"></circle>
</symbol>
<use href="#piece" x="25" y="25" transform="matrix(0.75,0,0,0.75,6.25,6.25)"></use>
<text x="0" y="192.1015625" svgjs:data="{"leading":"1.3"}">piece</text>
</svg>
</svg>
</svg>
This works fine in Chrome and Opera, but does not work in Firefox.
You should see this: https://ibb.co/VT8SSSd.
But in Firefox, I get this: https://ibb.co/5L7PP22.
If I inspect the code, the <symbol>s are greyed out, suggesting they are not being referenced, when they very clearly are right afterwards. I also tried moving all the symbols into a global <defs>, but that didn't work either. Any ideas how to tweak this so it will work in Firefox too?
These SVG browser differences are maddening, I've got to say.
Once I loaded the SVG on my website so I could test in some different environments, it suddenly started working. My suspicion is there's some weird CSPF happening, perhaps only on my end. But the SVG does not appear to be the fundamental problem.
As you were.
The following attempt to make a rectangle with a pattern fill doesn't seem to work in Safari 6.1, Firefox 30, or Chrome 36, even though the W3 spec seems to say that a I can use a non-local IRI reference, including a relative one, like fill="url(localURL.svg#MyId)".
test.html
<html>
<head>
<style>
.patterned { fill: url("patterns.svg#polkadot");
stroke: lime; stroke-width: 5px}
</style>
</head>
<body>
<svg width="500" height="500">
<rect class="patterned" height="27" width="58">
</svg>
</body>
</html>
patterns.svg
<svg xml:space="preserve" width="225" height="110" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="polkadot" patternunits="userSpaceOnUse" x="0" y="0" width="20" height="20">
<circle r="10" cx=12 cy=10 fill="purple">
</pattern>
</defs>
</svg>
Safari and Chrome show a black-filled green-outlined rectangle. Firefox shows an empty or white-filled green-outlined rectangle. None of them show the pattern of purple circles.
I'm trying this approach because I couldn't get an SVG fill pattern to work on Safari in the Backbone+JQuery+D3 project I'm working on using the most common method, an inline defs with fill="url(#MyId)". I couldn't get that approach to fail as a simple test case -- I thought I had, but that turned out to be a different Safari bug with an obvious workaround. At least that approach worked in some browsers.
You've a load of syntax errors in your patterns.svg file. Missing " characters round attribute values, an unclosed circle element, patternunits instead of patternUnits.
SVG standalone must be valid XML, it's not as forgiving as html and it's case sensitive on attribute names too. If you loaded the patterns.svg file directly, browsers would tell you all these things.
With all this fixed (as below) this works in Firefox. I'm not sure Chrome/Webkit have implemented this yet.
<svg xml:space="preserve" width="225" height="110" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="polkadot" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
<circle r="10" cx="12" cy="10" fill="purple"/>
</pattern>
</defs>
</svg>
Safari browser (I'm testing under windows) seems having problem in displaying Svg Image element.
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<img src="image.svg" />
</body>
</html>
And here is the content of the image.svg:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="50" y="50" width="100" height="100" style="fill:blue"></rect>
<rect id="foo" x="50" y="150" width="500" height="500" style="fill:green"></rect>
<image x="50" y="10" width="200" height="200" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="></image>
</svg>
Is there any solution or workaround to make this work in Safari?
In the <image> tag inside the svg element, href works fine in Chrome. To work in older versions of Safari, you need xlink:href. (Also applies to the <use> tag.) Keep in mind xlink:href is deprecated and is being replaced by href. However, it was not supported until Safari 12.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/href
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ...>
<image href="data..." xlink:href="data...">
</svg>
I think there are two problems here:
You haven't said anything about how large your SVG image is. As a rule, you should at least include a viewBox attribute in the <svg> tag. For example:
<svg width="250" height="250" viewBox="0 0 250 250" ... >
The other problem is that Safari isn't particularly brilliant at rendering SVGs. However, it tends to do better when you embed them with an <iframe> or <object> tag instead of using <img>. For example:
<object data="image.svg" type="image/svg+xml"></object>
Also, make sure your server is delivering SVG content with the correct MIME type (Content-Type: image/svg+xml), as this can cause problems too.
So give this a try:
HTML source:
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<object data="image.svg" type="image/svg+xml"></object>
</body>
</html>
image.svg:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="250" height="250" viewBox="0 0 250 250"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="50" y="50" width="100" height="100" style="fill:blue"></rect>
<rect id="foo" x="50" y="150" width="500" height="500" style="fill:green"></rect>
<image x="50" y="10" width="200" height="200" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="></image>
</svg>
Be sure to supply your <svg> tag with a height, width, and view box like so. Safari doesn't like it when height or width is set to auto for some reason. ⤵︎
<svg height="16px" width="16px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M60......"></path></svg>
I just discovered this same problem when I checked an app I was working on in Safari, after having been using Chrome most of the time. I wrote this bit of TypeScript/jQuery code (easily enough turned into plain JavaScript) to solve the problem:
export function setSvgHref(elem: JQuery, href: string) {
elem.attr('href', href);
if (isSafari()) {
elem.each(function() {
this.setAttributeNS('http://www.w3.org/1999/xlink', 'href', href);
});
}
}
In my case, the problem was related to <mask> tags in svg.
I deleted the following line in my svg component and it started to work on Safari.
<mask id="y9iogdw0wd" fill="#fff">
<use xlink:href="#jz8vxv0q6c"/>
</mask>
I had a problem with a wordmark (text that I use as a logo) that I saved as a .svg file. It was on my page with a <img src="...svg"> but did not appear properly in Safari (current version as of July 2020). The SVG worked fine with FireFox, Chrome, and Brave.
I had created the SVG in Inkscape. I selected the entire object, then used Path -> Object to Path... and saved the resulting file.
This rendered properly in all four browsers. (I'm writing this here in case I have this problem again: it'll tell me what I did to fix it.)
I need to wrap text inside a shape. This is the code I found in a reference, but itself is not working. Can anyone help me?
<svg xmlns:svg="http://www.w3.org/2000/svg" version="1.2"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="600px" height="400px" viewBox="0 0 300 310">
<title>Basic textflow</title>
<rect x="0" y="0" width="100%" height="100%" fill="yellow"/>
<flowRoot font-size="16" fill="black" color="black">
<flowRegion>
<path d="M100,50L50,300L250,300L300,50z"/>
<flowText>Tomorrow, and tomorrow, and tomorrow; creeps in this
petty pace from day to day, until the last syllable of recorded time.
And all our yesterdays have lighted fools the way to dusty death.
</flowText>
</flowRegion>
</flowRoot>
<path d="M90,40L40,270L260,270L210,40z" fill="none" stroke="black" stroke-width="5"/>
</svg>
My Requirement:
This is not the answer you want but it is the best I've found. Both FireFox and to lesser extent Chrome support the foreignObject tag. With this you can add text. This generally works well but you are limited to a rectangle for wrapping this way. The xmlns attribute is required.
<foreignObject x="225" y="630" width="157" height="125">
<div class="plain-text" xmlns="http://www.w3.org/1999/xhtml">
You can put really long lines of text here and they will wrap as you would hope they would. The problem is that Chrome doesn't support <ul><li> tags in side the foreignObject.
</div>
</foreignObject>
The desired flow region is just not supported by any browser. Here's a link to Stackoverflow answer that gives more detail.
Auto line-wrapping in SVG text
I'm working on a portfolio (http://www.chloémorillon.com/) website and I've got a problem when I checked it throught all the web browsers. It work well on chrome, but when I check it with Safari, the browser keep refreshing the page until it crash definitely.
I use SVG to render the parallepipeds so I think that the problem come from there...
Here's the code for each shaped box :
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="485" width="305" class="svg-graphic">
<filter id="grayscale">
<feColorMatrix values="0" type="saturate"/>
</filter>
<g>
<clipPath id="hex-mask">
<polygon points="200, 0 200,284 0,384 0, 100"/>
</clipPath>
</g>
<a xlink:href="http://xn--chlomorillon-eeb.com/projets/">
<polygon transform="translate(2, 6)" points="200, 0 200,284 0,384 0, 100" stroke-width="10" stroke="#1a171b" fill="#1a171b"/>
<polygon transform="translate(2, 6)" points="200, 0 200,284 0,384 0, 100" stroke-width="10" stroke="#75ffba" fill="#75ffba" id="bandw"/>
<image preserveAspectRatio="xMidYMin slice" transform="translate(3, 6)" xlink:href="http://xn--chlomorillon-eeb.com/wp-content/themes/culotte/images/accueil1.jpg" width="100%" height="100%" clip-path="url(#hex-mask)" id="color"/>
<image preserveAspectRatio="xMidYMin slice" transform="translate(3, 6)" xlink:href="http://xn--chlomorillon-eeb.com/wp-content/themes/culotte/images/accueil1.jpg" width="100%" height="100%" filter="url(#grayscale)" clip-path="url(#hex-mask)" id="bandw"/>
</a>
</svg>
Do you have any clue about my problem ?
Just some general debugging help: when things fail try removing code until you find the offending piece of code. I'd start by removing the filter, since Safari 5 does not support SVG filters. This should not cause a crash (it should just ignore the filter) but you never know.
Another possible failure point is the utf-8 domain http://xn--chlomorillon-eeb.com, try a relative path (just <a xlink:href="/projets">).
Once you identify the piece of code that is causing the crash you can devise a workaround, either with javascript or a fallback for Safari 5.