A newbie question. SVG text fill seems not to fill the text in Chrome (same problem in Chrome Canary). Firefox and IE work well. Could someone point me to a work-around, perhaps? Here's the HTML/SVG document:
<!DOCTYPE html>
<html>
<head>
<title>SVG Text</title>
</head>
<body>
<h2>
Text Example
</h2>
<svg id="svgText" height="250" width="600">
<text id="txt" x="100" y="250" font-family="sans-serif" font-size="200" font-weight="bolder"
stroke="red" fill="red">TEXT</text>
</svg>
</body>
</html>
Thanks a lot!!
[Please see screen-shot below (Google Chrome on Win7). Note the edges of X as well as the right edge of the first T.]
OK, it appears to be a Chrome bug (on Windows). I have reported it here https://code.google.com/p/chromium/issues/detail?id=478384
Thank you all for the comments! Much appreciated.
Related
I want to create a line with svg in html and show in old browsers like this :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
<polyline points="10,10 50,10 150,100 250,100 300,150" fill="#fff" stroke-width="2" stroke="rgb(255,0,0)"/>
</svg>
</body>
</html>
This code will show in new browsers normally but in IE6 it doesn't show anything.
please help me how can i fix it to show my svg code in IE6
This page : https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html
said I must to download Adobe SVG Viewer 3.03 plugin to view svg in IE4-IE8, but i can't find plugin.
Please help me
I have following svg in HTML, it works fine on all browser on my desktop machine. basically, it shows a point in IE, Chrome, and Firefox and this is how I want, it should display. but chrome on my surface device it's not showing the path, Please tell me how to fix it.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<svg height="400" width="400">
<path stroke="#FF3439" stroke-linecap="round" d="M23.2939901697945,49.74999999999997Z" stroke-width="8"></path>
</svg>
</body>
</html>
A workaround to this issue is to make two points out of your single point:
from: d="M23.2939901697945,49.74999999999997Z"
to: d="M23.2939901697945,49.74999999999997Z M23.2939901697945,49.74999999999997Z"
I did reproduce this issue on Mac Chrome 60, this fixed it.
This is all the code I'm using:
<body>
<svg width="1000" height="400">
<rect rx="4" ry="4" width="20" height="240" style="fill:rgb(217,228,235);" >
<title>SVG Title Demo example</title>
</rect>
</svg>
</body>
Here it is in JSFiddle
I've just been following loads of suggestions online. Nest the title element inside the rect element.
But it doesn't seem to work.
Any idea why?
PS. Let me know if the JSFiddle works. It could be an issue with my browser. (using chrome v44)
It works fine in Safari and Chrome.
The problem is your browser version. It worked fine for me in Chrome Version 51.0.2704.103 m, so the code is fine. Try updating Chrome]1
Chrome seems not to display <use> elements in inline svg. Here is an example (code below or view it at http://www.bobwyttenbach.com/chromeuse.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chrome use-tag bug?</title>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200">
<defs>
<g id="test1">
<circle cx="100" cy="100" r="50" fill="red"/>
</g>
</defs>
<g>
<rect x="0.5" y="0.5" width="199" height="199" stroke="black" fill="none"/>
<use xlink:href="#test1" x="0" y="0"/>
</g>
</svg>
<p>Above is inline svg with a use tag; below is the same svg linked through an object tag. Below is correct.</p>
<object data="chromeuse.svg" width="200" height="200"></object>
</body>
</html>
The red circle does not appear in the inline svg but does appear when the same svg is linked through an object tag. Safari, Firefox, Opera, and Internet Explorer 9 all display the inline svg correctly.
Am I doing something wrong? Is this a known Chrome bug (I haven't found it listed)? Any workarounds?
Don't know if this question is still relevant, but I've met such a case recently and I pretty sure that somebody else will meet the case (especially those who tries to make use of SVG sprites for the first time).
In my case I've joined 16 SVG icons in one sprite manually into sprite.svg, and in this file I've omitted important meta information:
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
I had no first line at all, and all I had on the second line was an opening <svg> tag with no meta attributes (xmlns and xmlns:xlink). As soon as I brought back all this omitted meta information, my graphics from sprite.svg started to display properly.
Hope it helps someone.
Ok so I deleted my last post as I incorrectly tried to figure out why the use element was working for me and not for you. What I can say is that I am using a modified version of this source, https://code.google.com/p/svg-edit/ , so in short, my answer is to walk through and see how they do it. I believe its demonstrated when you insert an image from their library.
I spent a long time debugging inline svg use elements not showing up. The chrome bug discussed by BobW seems fixed at this time. To eliminate the same issue caused by something else entirely, try commenting out the <base href="somethingsomethingsomething" /> tag from your HTML.
Of course, this will likely break every relative link on your site, but the <use> elements now show up. One step forward, half a step back :)
Related info here:
Using base tag on a page that contains SVG marker elements fails to render marker
HTML5 supports the <svg> tag, allowing to embed SVG into HTML.
Digging a little deeper, can I nest some HTML inside my <svg> fragment? For example, I'd like to put a CSS'ed <table> in some part of my SVG graphics.
I made a small test and Chrome12 didn't like the HTML <p> inside the <svg>.
Is there some technique to make it work (such as maybe an html container tag?)?
Yes, with the <foreignObject> element, see this question for some examples.
Alternatively, if you have an html5 document you can also use CSS positioning and z-index to make parts of html visible where you want laid out on top of the svg. If you do it like that you don't need to nest the html inside the svg fragment. This will give you the most consistent behaviour across browsers in my experience.
Copied from bl.ocks.org (thank you, Janu Verma)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML inside SVG</title>
<style type="text/css"></style></head>
<body>
<div>I'm a div inside the HTML</div>
<svg width="500" height="300" style="border:1px red solid" xmlns="http://www.w3.org/2000/svg">
<foreignobject class="node" x="46" y="22" width="100" height="100">
<div style="border:1px green solid">I'm a div inside a SVG.</div>
</foreignobject>
<circle cx="100" cy="160" r="50" fill="blue"></circle>
</svg>
<div>Interesting! But you a Foreign Object.</div>
</body>
</html>
UPDATE
Note that there is a 'camel error' in the above - it's supposed to be foreignObject (capital O), not foreignobject. It doesn't matter if the misspelling is in 'straight' HTML/SVG. But if you use JavaScript (.createElementNS), then it won't work without proper camel case (April 2020)
Foreign Objects are not supported on Internet explorer. Please check ForeignObject