Question

我有一个简单的基于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'>&#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>

我使用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的行为，还是我必须围绕它进行编程？

Answer 1

SVG规范允许：

可以消除多余的空白区域和逗号分隔符（例如，“M 100 100 L 200 200”包含不必要的空格，并且可以更紧凑地表达为“M100 100L200 200”）。

<强>参考

SVG:8.3.1 General information about path data

Answer 2

如果在评论中忽略了这一点，我会将其作为答案发布：

要以跨浏览器兼容的方式解析d svg元素的path属性的内容，请使用pathSegList属性。

（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

如果d属性包含逗号，并且不包含逗号，则此功能将起作用。

IE11从我的SVG / XML属性中删除逗号

2 个答案:

SVG：

的JavaScript：