javascript 取坐标-使用 javascript 从任意 SVG 路径中提取 x,y 坐标

bendan520 javascript

2023-08-29 0 9,030 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

问题描述

我想用变量替换 SVG 路径内的坐标。（使用 JavaScript）。尽管 SVG 路径可能有多种类型javascript 取坐标，但对具体示例的一些支持会有很大帮助：

d = "M27,0C27,21,4,34,-13,23C22,18,-27,9,-27,0";

我希望将此 SVG 路径转换为

var x = [];
var x[0] = 27; x[1] = ...
d = "M + x[0] + "," + y[0] 
    + "C" 
    + x[0] + "," + y[0] + ","
    + x[1] + "," + y[1] + ","
    + x[2] + "," + y[2] + ","
    + "C" 
    + x[3] + "," + y[3] + ","
    + x[4] + "," + y[4] + ","
    + x[5] + "," + y[5];

所以我的问题是找到正确的 JavaScript 正则表达式来提取所有变量并使用它生成 SVG 路径。

我实际上正在做的是创建代表给定 SVG 的 JavaScript 对象，并且我希望能够单独设置坐标。

非常感谢任何帮助

谢谢，马丁

更新：遵循已接受的答案，还有一种非常方便的方法可以在很棒的 raphael.js 库中剖析 SVG 路径

推荐答案

只需使用 SVG DOM 来解析此问题/答案中有更多详细信息，但基本上您会这样做

var segments = path.pathSegList;

，它为您提供了一系列可以读取或写入的段和值。

segments.getItem(0).y = -10;

其他推荐答案

这可能是你的正则表达式：

var newd = d.match(/(^[0-9]+,)|(^,[0-9]+)$/g);
var arrayd = newd.split(",");

其他推荐答案

我刚刚学习 JavaScriptjavascript 取坐标，所以我无法帮助转换，但是这个正则表达式应该有帮助：

-?d+

它捕获您提供的字符串中的所有坐标，同时防止字符 [a-zA-Z]。

，但我可以提供一些java代码。

Pattern p = Pattern.Compile("-?d+");
Matcher m = p.matcher(yourPathString);
while(m.Find())
    \add the match to your new table or something you want

收藏 (0) 打赏

感谢您的支持，我会继续努力的!