tenryu

<p>PCでの動作確認では問題なかったが、スマホで確認したところSafariでもChromeでもずれていた<br>
svgがずれているように思ったが、よく見たら「svg内で表示していたテキスト」がずれていた</p>


<p>svgファイル内のtextタグでテキストが定義されている<br>
この定義を修正する必要がある<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__75e999853075c" src="https://embed.zenn.studio/card#zenn-embedded__75e999853075c" data-content="https%3A%2F%2Fspyweb.media%2F2018%2F01%2F09%2Fsvg-horizontal-vertical-centering%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://spyweb.media/2018/01/09/svg-horizontal-vertical-centering/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://spyweb.media/2018/01/09/svg-horizontal-vertical-centering/</a></p>


<div class="code-block-container"><pre><code>&lt;tspan x="-162" y="0"&gt;テキスト&lt;/tspan&gt;
</code></pre></div><p>これがあるとデフォルトのx座標がずれる。まず一旦tspanタグごと削除</p>


<div class="code-block-container"><pre><code>&lt;text x="0" y="0" text-anchor="middle"&gt;テキスト&lt;/text&gt;
</code></pre></div><p>これで上下中央に配置が可能</p>
