こうする

async function loadAsImage(svg) {
	return new Promise((resolve, reject) => {
		const svgXml = new XMLSerializer().serializeToString(svg);

		const blob = new Blob([svgXml], { type: 'image/svg+xml' });
		const url = URL.createObjectURL(blob);

		const img = new Image();
		img.onload = () => {
			URL.revokeObjectURL(url);
			resolve(img);
		};
		img.onerror = (e) => {
			URL.revokeObjectURL(url);
			reject(e);
		};
		img.src = url;
		console.log(url);
	});
}

const img = await loadAsImage(svg);
ctx.drawImage(img, 0, 0);

ポイント

XMLSerializer を使っているところ。svg.outerHTML だと HTML 的に解釈された svg なので、xmlns が入らず、単体の SVG としては正しくないものになっている。

ただ、ブラウザ自体は HTML の svg が xmlns を持っていることは知っているため、XMLSerializer を使うことで正しい svg にできる。

軸

スプールを固定するボルトとナットを作り、そこに固定軸を貫通させるようにした。

TR30x6 という台形ねじにした。早くねじこみたいと思うとピッチを広くしたくなるが、Fusion360 だとピッチが広いねじだと台形ねじになるようだった。デフォルトだと3Dプリントしたときキツいので、ねじの面をメス側で0.2mmオフセットさせている。

ところで Fusion360 だとねじの面取りがあまり直感的ではなく、先に穴に対して面取りをかけてからねじを作成し、面取りのフィーチャをねじの作成後に移動するという手順を踏まないといけない。

メス側を完全に貫通にすることで、ボルトをつけたままスプールホルダだけつけはずしできる。

台

ボルトをハメるだけの簡単な構造。

ボックス的にギリギリ3つのスプールが収められる感じなので、軸が干渉しないように工夫してある。軸の位置を、上下に若干ずらし斜めにすべらせて設定する構造に。