Get Path cordinates into my JavaScript file



我用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" />

您可以尝试创建一个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"));

最新更新