1

I have a simple web based drawing tool where I use SVG to store the drawing in a data base.

Typical sag looks like this :

<?xml version='1.0'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg version='1.1' xmlns='http://www.w3.org/2000/svg'>&#13;
<path fill='none' stroke='#FF0000' stroke-width='4' d='M85, 140 L85, 140, 86, 140, 88, 140'/>
<path fill='none' stroke='#FF0000' stroke-width='4' d='M299, 130 L299, 130, 301, 129, 304, 128'/>
</svg>

I manipulate the XML using jQuery via:

svgDoc = jQuery.parseXML(svgData);

There is problem with IE in that it strips the commas from my attributes.

In IE the d attribute comes out as " M85 140 L85 140 86 140 88 140 " All other browsers have "M85, 140 L85, 140, 86, 140, 88, 140"

Put simply is there a way of changing IE'd behaviour or do I have to program around it?

Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265
Zoran
  • 391
  • 1
  • 3
  • 12
  • Are planning to parse the string d value of a path? Since the path rendering in IE is OK without commas. If you do plan to parse for d values, you should use the pathSegList to access commands and values. – Francis Hemsher Feb 14 '14 at 03:44

2 Answers2

1

The SVG spec allows this:

Superfluous white space and separators such as commas can be eliminated (e.g., "M 100 100 L 200 200" contains unnecessary spaces and could be expressed more compactly as "M100 100L200 200").

References

Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265
  • Sure, it is allowed, but the spec doesn't say that the user agent may change the way it was written. Also, IE will insert superfluous white space when you dont have any (e.g. "M100 100L200 200" will be changed to "M 100 100 L 200 200"), which is the complete opposite of what the spec says here. – Julian Sep 20 '16 at 00:28
  • @Julian The OP found that `In IE the d attribute comes out as " M85 140 L85 140 86 140 88 140 "`. How does your test code result in `will be changed to "M 100 100 L 200 200"),`? – Paul Sweatte Sep 20 '16 at 01:37
  • Look at it in IE, Superfluous whitespace is inserted. But that aside, my point is that the user agent shouldn't be changing the attribute value just because the changed syntax is still technically correct. The spec allows the author to write the path that way. The spec does not say the user-agent may change what the author wrote. Changing the way the path string was written poses a problem for the author when s/he tries to parse that path string. – Julian Sep 20 '16 at 18:53
  • @Julian The [W3 says](https://www.w3.org/wiki/SpecProd/Restyle): No consensus on which is more important. Two viewpoints so far: 1. `Authors are more important, and specs should be optimized for them even at the expense of implementers.` 2. `Authors and implementers are equally important, and specs should be optimized for both, not optimized for one at the expense of the other.` – Paul Sweatte Sep 20 '16 at 20:25
  • That's not what the question is about. It makes no sense to cite this part of the spec. I'm sorry. And I am sorry if I sounds bitter, it's just that I am looking for the answer to the same question as the OP and this does not help. – Julian Sep 20 '16 at 21:11
  • @Julian [You're](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7573356/) [not](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7698940/) [alone](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/212462/). Path data is designed to support minimization, but there is a [platform for discussion](https://github.com/benkasminbullock/Image-SVG-Path/issues/12) about interop. – Paul Sweatte Sep 20 '16 at 22:55
0

I am posting this as an answer in case it is overlooked in the comments:

To parse the contents of the d attribute of an svg path element in a cross-browser compatible manner, use the pathSegList property.

(jsFiddle example)

SVG:

<path id="myPath" d="M 0 0 L 100 100 />

JavaScript:

var path = document.getElementById("myPath")
var pathSegs = path.pathSegList;

// it's important to use '.getItem()'; IE doesn't support accessing with item index
var start = pathSegs.getItem(0);

var typeLetter = start.pathSegTypeAsLetter; // 'M'
var x = start.x; // 0
var y = start.y; // 0

This will work if the d attribute has commas and also when it doesn't.

skeryl
  • 5,225
  • 4
  • 26
  • 28