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.
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
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
Here is the short simple HTML5 code that defines my page:
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
</head>
<body>
<iframe src="2.html" width="450" height="350"> </iframe>
</body>
</html>
I have triple-checked that file 2.html exists in the same directory, and it has some code in it. I have cleared caches and history in my browser, but observed no page embedded. I have tried this in Chrome, Firefox and IE too, but am getting nothing. I just got the iframe box with border, that's completely white (blank). What's wrong with it?
I need to embed a SVG file in a HTML document. File Example.svg is in the same directory of the HTMl file.
Using the following code, no SVG is inserted and nothing shown, but looking at network debut panel in Chrome DEV tools i can see the SVG is loaded.
What could be wrong and how to fix it?
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<svg width="250" height="250">
<use xlink:href="Example.svg"></use>
</svg>
</body>
</html>
Content of my SVG file https://jsfiddle.net/900xLbor/
Same problem here: https://jsfiddle.net/900xLbor/2/
MDN article about xlink:href attribute on the <use> element :
An <IRI> reference to an element/fragment within an SVG document.
In other words, you need to set the id of the element to use into the href :
<use xlink:href="Example.svg#svg2"/>
Here is a plunker demonstration
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.