ブラウザのデフォルトの機能で座標を取得する
- まずイラレでパスを作る。「オブジェクト>複合パス>解除」をした方がいい場合もある。
- svgの各種APIを使う
svg parser by kitasenjudesign -p5.js Web Editor
var paths; function setup() { var svgText = '<?xml version="1.0" encoding="UTF-8"?><svg id="_レイヤー_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.3555 159.5796"><defs><style>.cls-1{fill:#e71f19;stroke:#040000;stroke-miterlimit:10;}</style></defs><path class="cls-1" d="M67.0952,102.0596h-33.6743v57.02H.5V.5h69.0693c15.9229,0,28.6177,4.0879,38.085,12.2646,9.4678,8.1763,14.2012,20.8359,14.2012,37.9771,0,18.7197-4.7334,31.9526-14.2012,39.6987-9.4673,7.7461-22.9878,11.6191-40.5591,11.6191Z"/><path class="cls-1" d="M82.5874,69.0312c4.3032-3.8008,6.4551-9.8257,6.4551-18.0742s-2.1704-14.1289-6.5088-17.644c-4.3408-3.5132-10.4189-5.2715-18.2358-5.2715h-30.877v46.6919h30.877c7.8169,0,13.9136-1.8999,18.2896-5.7021Z"/></svg>'; const parser = new DOMParser(); const svgDoc = parser.parseFromString(svgText, 'image/svg+xml'); const svgElement = svgDoc.querySelector('svg'); document.body.appendChild(svgElement); // SVGをDOMに追加 paths = svgElement.querySelectorAll('path'); paths.forEach((path) => { const length = path.getTotalLength(); console.log('Total length:', length); }); createCanvas(400, 400); } function draw() { background(220); paths.forEach((path) => { const length = path.getTotalLength(); for(i=0;i<100;i++){ const point = path.getPointAtLength(length / 100*i); // パスの点を取得 circle(10+point.x,10+point.y,5) } //console.log('Total length:', length); }); }
viewBoxの値を取得
const svgElement = svgDoc.querySelector('svg'); //document.body.appendChild(svgElement); // SVGをDOMに追加 const viewBox = svgElement.getAttribute('viewBox'); console.log(viewBox); // 例: "0 0 100 100" const [minX, minY, width, height] = viewBox.split(' ').map(Number); console.log('min-x:', minX); console.log('min-y:', minY); console.log('width:', width); console.log('height:', height);