もくじ
現象
Photoshopを使って、円もすべてシェイプツールを使用してSVG画像を作成しました。
※黒い部分はキャンバスの外側です。白い部分が実際のキャンバスです。
そしていざ使おうとすると端っこが切れてしまう現象に陥りました。
これはプレビューで見ています。
原因
線オプションの整列に問題がありました。
実際、作ったシェイプはパスに対して内側に線が引かれる設定になっていました。
これは線オプションの整列が内側になっていることになります。
おそらく、SVGを生成する際、見た目ではなくパスを基準に内側外側へ幅が均等に線が描画されるようです。
線オプションの整列を中央にすると一目瞭然です。
解決策（線オプションの整列は中央に）
まず、線オプションの整列を中央にします。
次にキャンバスサイズにおさまるように変形します。
解決できました。
