1

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>
shyam_
  • 2,370
  • 1
  • 27
  • 50

1 Answers1

1

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.

Jaroslav Benc
  • 560
  • 3
  • 13
  • This is an ugly, and quite possibly unreliable solution. – Paul LeBeau Sep 01 '17 at 12:14
  • It's a workaround, have a better idea? It's a Chrome on Mac where paths with single points are not rendered at all. Can you elaborate on why unreliable? – Jaroslav Benc Sep 01 '17 at 14:03
  • Yes. Use a circle as Robert suggested, or if for some reason it really has to be a path, make it a very short line rather than a single move point (or two move points in your case). – Paul LeBeau Sep 01 '17 at 19:45
  • And unreliable because, although it might work on a Mac, you can't guarantee that all browsers on all OSes will render this as desired. Including the OP's Surface device. – Paul LeBeau Sep 01 '17 at 19:49