在我的 JavaScript 文件中获取路径坐标答案

【问题标题】：Get Path cordinates into my JavaScript file在我的 JavaScript 文件中获取路径坐标
【发布时间】：2019-09-02 11:17:18
【问题描述】：

我使用 Inkscape 创建了一个路径，我可以通过 getElementByID 之类的方式将坐标（路径）从 SVG 文件中获取到我的 JavaScript 文件中吗？在下面发布了路径的代码。如果可以的话，我也在使用 SNAP.svg，只要留下你的答案，谢谢！我想将 d="m 110.36905......." 从 svg 文件中取出到我的 javascript 文件中

<path
         inkscape:original-d="m 110.36905,95.916669 v 52.160711 h 92.98214 v 40.06548"
         inkscape:path-effect="#path-effect821"
         inkscape:connector-curvature="0"
         id="L_PUF_AKL"
         d="m 110.36905,95.916669 c 0,11.243311 -0.0171,30.565001 -0.0389,52.160711 0,-3.5e-4 -4e-5,0.0393 -4e-5,0.0389 -0.006,0 0.0452,3e-5 0.039,2e-5 30.13329,0.0171 62.75026,0.0372 92.88868,0.0543 -0.0218,16.55036 -0.0388,31.35222 -0.0388,39.9722 0,0 0.13229,0 0.13229,0 0,0 0.13229,0 0.13229,0 0,-8.63617 -0.0171,-23.47747 -0.0389,-40.06548 0,5e-5 -1.3e-4,-0.0934 -1.3e-4,-0.0934 -0.001,0 -0.0917,5e-5 -0.0932,5e-5 -30.15147,0.0171 -62.78962,0.0372 -92.94323,0.0544 -0.0219,-21.57998 -0.0389,-40.88518 -0.0389,-52.121731 z"
         style="fill:#000000;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" />

【问题讨论】：

你的问题不是很清楚。您是否正在加载 inkscape 文件？如果是这样，您可以在加载后执行 console.log( Snap("#L_PUF_AKL").attr('d') )。

标签： javascript html xml snap.svg inkscape

【解决方案1】：

您可以尝试创建一个svg-元素，将路径作为innerHTML 插入其中并检索其d-属性。

const svg = document.createElement("svg");
svg.innerHTML = `<path
   inkscape:original-d="m 110.36905,95.916669 v 52.160711 h 92.98214 v 40.06548"
   inkscape:path-effect="#path-effect821"
   inkscape:connector-curvature="0"
   id="L_PUF_AKL"
   d="m 110.36905,95.916669 c 0,11.243311 -0.0171,30.565001 -0.0389,52.160711 0,-3.5e-4 -4e-5,0.0393 -4e-5,0.0389 -0.006,0 0.0452,3e-5 0.039,2e-5 30.13329,0.0171 62.75026,0.0372 92.88868,0.0543 -0.0218,16.55036 -0.0388,31.35222 -0.0388,39.9722 0,0 0.13229,0 0.13229,0 0,0 0.13229,0 0.13229,0 0,-8.63617 -0.0171,-23.47747 -0.0389,-40.06548 0,5e-5 -1.3e-4,-0.0934 -1.3e-4,-0.0934 -0.001,0 -0.0917,5e-5 -0.0932,5e-5 -30.15147,0.0171 -62.78962,0.0372 -92.94323,0.0544 -0.0219,-21.57998 -0.0389,-40.88518 -0.0389,-52.121731 z"
   style="fill:#000000;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" 
/>`;
console.log(svg.querySelector("path").getAttribute("d"));

【讨论】：

我是在我的 svg 文件还是在我的 javascript 文件中添加这个？因为我想要直接来自 svg 文件的路径
这是javascript。您必须以某种方式读取 svg 文件的内容并创建元素。如果是服务器端，则需要一些库才能创建 DOM 树。如果这不是一个选项，你必须摆弄正则表达式或字符串操作。
是的，我正在使用 snap.svg，在我的 xampp 服务器上运行脚本。但是可以直接从 svg 文件中获取 d 吗？
抱歉，我不太熟悉 xampp 或 snap.svg。想法在答案和评论中，您必须自己弄清楚在框架内执行它们的方法。