Parsing IE11从我的SVG/XML属性中去掉逗号
我有一个简单的基于web的绘图工具,使用SVG将绘图存储在数据库中 典型的凹陷如下所示:Parsing IE11从我的SVG/XML属性中去掉逗号,parsing,svg,internet-explorer-11,xml-attribute,Parsing,Svg,Internet Explorer 11,Xml Attribute,我有一个简单的基于web的绘图工具,使用SVG将绘图存储在数据库中 典型的凹陷如下所示: <?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'> &l
<?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'>
<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>
我通过以下方式使用jQuery操作XML:
svgDoc=jQuery.parseXML(svgData)代码>
IE的问题在于它会从我的属性中去掉逗号
在IE中,d属性显示为“M85 140 L85 140 86 140 88 140”
所有其他浏览器都有“M85、140、L85、140、86、140、88、140”
简单地说,有没有一种方法可以改变IE的行为,或者我必须围绕它进行编程?SVG规范允许这样做:
可以消除多余的空格和逗号等分隔符(例如,“M 100 100 L 200 200”包含不必要的空格,可以更简洁地表示为“M100 100L200”)
参考资料
我将此作为一个答案,以防在评论中被忽略:
要以跨浏览器兼容的方式解析svg
path
元素的d
属性的内容,请使用pathSegList
属性
()
SVG:
如果d
属性有逗号,并且没有逗号,这将起作用。是否计划解析路径的字符串d值?因为IE中的路径渲染没有逗号是可以的。如果您确实计划解析d值,则应使用pathSegList访问命令和值。当然,这是允许的,但规范没有说明用户代理可能会更改其编写方式。此外,当你没有空白时,IE将插入多余的空白(例如,“M100 100L200”将更改为“M 100 100 L200 200”),这与规范中所说的完全相反。@Julian OP发现,IE中的d属性显示为“M85 140 L85 140 86 140 88 140”
。您的测试代码如何导致将更改为“M 100 100 L 200 200”),
?请在IE中查看,插入了多余的空格。但除此之外,我的观点是,用户代理不应该仅仅因为更改的语法在技术上仍然正确就更改属性值。规范允许作者以这种方式编写路径。规范并没有说用户代理可能会改变作者写的东西。当作者试图解析路径字符串时,更改路径字符串的编写方式会给作者带来问题。@Julian the:没有一致意见认为哪个更重要。目前有两种观点:一,<代码>作者更重要,应该为他们优化规范,即使以牺牲实现者为代价。2<代码>作者和实现者同样重要,规范应该针对这两个方面进行优化,而不是以牺牲另一方面为代价进行优化。这不是问题所在。引用规范的这一部分是没有意义的。我很抱歉。如果我听起来很痛苦,我很抱歉,我只是在寻找与OP相同的问题的答案,这没有帮助。
<path id="myPath" d="M 0 0 L 100 100 />
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