I have an SVG file and I'd like the text to be editable. Following advice on stackoverflow, I'm using <foreignObject> to acheive this. (Code example below.)
It works a treat in the Chromium browsers, Chrome and Edge.
It doesn't work in IE, but then it doesn't support <foreignObject>, so no surprise.
It also doesn't work in Firefox and I can't figure out why.
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
<style>
#text2edit {
font-family: Helvetica, Arial, sans-serif;
font-size:24px;
}
</style>
<path id="screen" d="M0 0h300v100H0z" fill="#00f"/>
<foreignObject x="10" y="10" width="280" height="50">
<div xmlns="http://www.w3.org/1999/xhtml" contenteditable="true" id="text2edit"
style="color: #d4defb; background-color:#000;text-align: center;">Click to edit</div>
</foreignObject>
<text width="300" height="25" x="0" y="60" fill="#fff">
You can click to edit (and click outside
</text>
<text width="325" height="25" x="0" y="85" fill="#fff">
the box when done). Chrome only :-(
</text>
</svg>
Ultimately I want this in an SVG file that's included in an HTML file (using <object>). To emulate this, I've saved the code above in an SVG file and look at it on my own machine via a localhost URL.
Curiously if I put it in a codepen (paste the SVG above as HTML), it works fine in Firefox. But then that's really because the SVG is in-lined into HTML, which I'm trying to avoid.
Is there a trick to get Firefox working. And is there a trick to get IE working too?
Related
Could You help me that:
I have svg file:
FILE_SVG
exported from Illustrator. Designated target for me is to add "hover" effect to it (it could be Zomm effect or color changing), but at the end file will be uploaded into company's intranet site which is running on Sharepoint. I've made it with CSS but internal template is cutting whole css part/code.
As i know it's possible to be done with Javascript...
Cany You help Me with that or provide an extewrnal link to start with (for amateurs ofc).
Thanks for any help...
If your internal template is cutting your custom CSS, then it's likely going to cut your custom JavaScript as well. To my knowledge, you cannot embed hover effects into an SVG. But if you have access to the HTML and CSS or JavaScript then start with the following and experiment.
So you need to have three files.
Your SVG
Your HTML
Your CSS
in your SVG, it's going to have some weird code like:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
</svg>
copy that into your HTML, and add an id to the svg:
<div class="svg-wrapper">
<svg id="mySVG" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
</svg>
</div>
and something like this in your CSS:
#mySVG {
width: 200px;
height: 300px;
}
#mySVG:hover {
width: 250px;
height: 375px;
fill: blue;
}
if you do decide to do JavaScript instead of CSS, it will look something like:
document.getElementById("mySVG").addEventListener("mouseover", function () {
event.target.style.fill="blue";
});
Try this tutorial for using SVG: https://css-tricks.com/using-svg/
Try this tutorial for JavaScript hover events: https://www.w3schools.com/jsref/event_onmouseover.asp
You can achieve hover effects using SVG's built in SMIL animation feature. Sharepoint presumably won't strip that.
<svg>
<circle cx="150" cy="75" r="50" fill="red">
<set attributeName="fill" to="green" begin="mouseover" end="mouseout"/>
</circle>
</svg>
Note that this won't work in IE though. Which might be a problem if you are a big MS workplace :)
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>
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>
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 have spent a few days on the following with no joy.
I wish to render Mathjax in an SVG file. I have no problem including it in a html file in an svg element using a foreignObject from the examples at https://groups.google.com/forum/#!topic/mathjax-users/_UMt3C7TIpQ/discussion, but I cannot get it to work in an svg file.
The code I am trying is as follows :-
<svg width="1960" height="1080" xmlns="http://www.w3.org/2000/svg">
<script type="text/javascript" src="MathJax-master/MathJax.js?config=TeX-AMS_HTML-SVG"></script>
<g>
<title>Layer 1</title>
<text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="50" id="svg_1" y="223" x="636" stroke-opacity="0.8" stroke-width="0" stroke="#007FFF" fill="#000000">Hello World</text>
<foreignObject x="100" y="100" width="100" height="100">
<body xmlns="http://www.w3.org/2000/svg">
<div>
\(\displaystyle{x+1\over y-1}\)
</div>
</body>
</foreignObject>
</g>
</svg>
Any help would be much appreciated. I do suspect the problem is with the line declaring the body element.
A <div> tag is html so the <body> tag should be in the html namespace xmlns="http://www.w3.org/1999/xhtml" rather than the svg namespace.
Your other mistake is that you're using html syntax for the script tag. SVG script tags use xlink:href instead of a src attribute. Fixing that gets us here:
<svg width="1960" height="1080" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<script xlink:href="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<g>
<title>Layer 1</title>
<text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="50" id="svg_1" y="223" x="636" stroke-opacity="0.8" stroke-width="0"
stroke="#007FFF" fill="#000000">Hello World</text>
<foreignObject x="100" y="100" width="100" height="100">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>
\(\displaystyle{x+1\over y-1}\)
</div>
</body>
</foreignObject>
</g>
</svg>
But when we do that we run into a bug in the mathjax library. It seems it expects to find html nodes in the document (check the Firefox Error Console). You'd have to contact the mathjax developers and get them to fix their bug to progress further.