Question

我想使用SVG DOM来操纵路径点（在这种情况下为了简单起见）。问题是位于网页内的<svg>标记内部如下：

<html>
<head>
    <title>svg dom access</title>
</head>

<body>
    <svg id="SVG">
        <path id="foo" d="M150 0 L75 200 L225 200 Z" />
    </svg>
</body>
</html>

是否可以访问svg DOM？我想按照以下方式运行：

//get svg dom somehow
var path = document.getElementById('foo');
var segments = path.normalizedPathSegList;

for (var i=0,len=segments.numberOfItems;i<len;++i){
    var pathSeg = segments.getItem(i);
    pathSeg.x = pathSeg.x + someFunction(pathSeg.x); 
}

可在此处找到jsfiddle进行实验。

Edity ：我真的希望尽可能访问 SVG DOM 。否则我只会重写d标签但是id而不是解析数据，但是如果我必须

我会的

Answer 1

你的小提琴中唯一的问题是normalizedPathSegList，它似乎没有一致地实现，但你可以使用pathSegList，它会给你想要的结果。

var segments = path.pathSegList;

https://jsfiddle.net/73ffn15k/

在网页中使用SVG dom

1 个答案: