Question

我正在尝试使用代码在svg元素上绘制边框。

 elem.attr({
                    'stroke-width' : 2,
                    'stroke' : '#3fa9f5'
                });

已经绘制了elem，我无法控制它是如何绘制的。当我看到它的路径即elem.d时，Z不会出现在最后。因此，我无法在一端绘制边框。

elem.d="M 323.5 8 L 323.5 40 409.5 40 409.5 8"

我可以动态地将Z添加到上面的元素吗？将Z添加到elem.d字符串不起作用。

将Z添加到elem.d的代码

if(elem.d !== undefined){
                if(elem.d.indexOf("Z") === -1){
                    elem.d += " Z";
                }
            }

Answer 1

没有elem.d property。界面是SVGAnimatedPathData

所以它elem[0].pathSegList。appendItem附加Z.而createSVGPathSegClosePath来创建它，这意味着将它们放在一起就像这样。

elem[0].pathSegList.appendItem(elem[0].createSVGPathSegClosePath());

[0]解包元素上的jquery包装器（如果elem是原始DOM元素对象，则不需要[0]）

如果你想测试最后一段是否是一个关闭路径，那么你想要这样的东西......

var pathSegList = elem[0].pathSegList;
if (pathSegList.numberOfItems > 0) {
    var lastSeg = pathSegList.getItem(pathSegList.numberOfItems - 1);
    if (lastSeg.pathSegType != lastSeg.PATHSEG_CLOSEPATH) {
       // do whatever
    }
}

或者你可以使用attr（jquery）或get / setAttribute（DOM）

elem.attr（d）将获取属性作为字符串，因为elem [0] .getAttribute（＆＃34; d＆＃34;）上面的SVG DOM将提供更好的性能。

更新现有SVG元素的路径

1 个答案: