遍歷JS中的所有SVG元素
[英]Iterate through all SVG elements in JS
問題描述
我無法遍歷JavaScript中SVG文件的所有子級。 我想遍歷所有路徑並對它們執行功能（將它們更改為多邊形）。
我已經嘗試使用querySelectorAll("path");創建路徑數組querySelectorAll("path"); ，但無效。 現在，我正在嘗試篩選SVG文件中的所有元素，並隨心所欲地轉換路徑。
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Reader</title> </head> <body> <input type="file" id="fileReader" /> <br> <p id="Content"></p> <script> document.getElementById("fileReader").addEventListener('change',function(){ var fr = new FileReader(); fr.onload = function(){ console.log("File Loaded!") } parser = new DOMParser(); var doc = parser.parseFromString(fr.readAsText(this.files[0]), "text/xml"); console.log(doc); var path = "path"; doc.querySelectorAll('*').forEach(function(){ if($(this).is(path)){ var polygon = doc.createElementNS("http://www.w3.org/2000/svg", "polygon"); polygon.setAttribute("id", $(this).getAttribute("id")); console.log("Converting " + $(this).getAttribute("id")); var len = $(this).getTotalLength(); var p = $(this).getPointAtLength(0); var seg = $(this).getPathSegAtLength(0); var stp=p.x+","+py; for(var i=1; i<len; i++){ p=$(this).getPointAtLength(i); if ($(this).getPathSegAtLength(i)>seg) { stp=stp+" "+p.x+","+py; seg = $(this).getPathSegAtLength(i); } } polygon.setAttribute("points", stp); $(this).replaceWith(polygon); } }); }); </script> </body> </html>
這給了我兩個錯誤：
XML分析錯誤：語法錯誤位置：file：/// C：/Users/Temp/Desktop/Experiment.html行號1，列1 ： 。
ReferenceError：$未定義 。
由於它不起作用，我已停止嘗試使用doc.children（）。
1 個解決方案
解決方案1
0 2019-08-20 16:09:04
只需將jQuery庫添加到您的項目中即可。
<script src =“ https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”>
碼：
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <title>Reader</title> </head> <body> <input type="file" id="fileReader" /> <br> <p id="Content"></p> <script> document.getElementById("fileReader").addEventListener('change',function(){ var fr = new FileReader(); fr.onload = function(){ console.log("File Loaded!") } parser = new DOMParser(); var doc = parser.parseFromString(fr.readAsText(this.files[0]), "text/xml"); console.log(doc); var path = "path"; doc.querySelectorAll('*').forEach(function(){ if($(this).is(path)){ var polygon = doc.createElementNS("http://www.w3.org/2000/svg", "polygon"); polygon.setAttribute("id", $(this).getAttribute("id")); console.log("Converting " + $(this).getAttribute("id")); var len = $(this).getTotalLength(); var p = $(this).getPointAtLength(0); var seg = $(this).getPathSegAtLength(0); var stp=p.x+","+py; for(var i=1; i<len; i++){ p=$(this).getPointAtLength(i); if ($(this).getPathSegAtLength(i)>seg) { stp=stp+" "+p.x+","+py; seg = $(this).getPathSegAtLength(i); } } polygon.setAttribute("points", stp); $(this).replaceWith(polygon); } }); }); </script> </body> </html>
你如何在 SVG.js 中訪問/迭代組的子元素
[英]How do you access/iterate through the child elements of a group in SVG.js
使用javascript / dojo用svg遍歷arcGis映射的不同元素
[英]Iterate through different elements of arcGis map with svg using javascript/dojo
如何在Snap.svg中使用填充或顏色遍歷SVG中的所有元素？
[英]How to iterate over all elements in an SVG with either a fill or color in Snap.svg?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.