カテゴリー: Tweets

備忘：

SVGファイルでテキスト1文字を綺麗に回転させることはできない。Androidで描画が欠落することを確認した。Windowsは知らん。テキストだけで完結したいけど無理そう…

<svg version="1.1"
	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	height="50px"
	width="50px"
	viewBox="0 0 50 50">
	<style>
		#typhoon {
			dominant-baseline: text-before-edge;
			font-size: xxx-large;
		}
	</style>
	<animateTransform
		xlink:href="#typhoon"
		attributeName="transform"
		type="rotate"
		from="0 25 25"
		to="360 25 25"
		dur="5s"
		repeatCount="indefinite"
	/>
	<text id="typhoon">🌀</text>
</svg>

「🌀」という1文字の回転中心座標を正確に指定することは、環境やフォントによって異なるため、困難です。JSを使用するとSVGファイルをimgタグで埋め込むことができなくなります。さらに、SVGファイル内ではCSS／@keyframesが正常に動作しないことがあります。

この問題に対する直接的な解決策は限られているようですが、一般的なアプローチとしては、素直に画像を回転させる方法が考えられます。回転したいテキストやシンボルを画像として作成し、必要な角度で回転させることで、一貫した表示が可能です。

また、回転が必要なテキストやシンボルを固定された角度で使用する場合、事前に回転済みの画像を用意しておくことも考えられます。

状況によって最適な方法が異なるかもしれませんが、回転の正確さやクロスブラウザの互換性を考慮しながら、適切な方法を選択することが重要です。

	<text
		id="typhoon"
		x="50%"
		y="50%"
		text-anchor="middle"
		dominant-baseline="central"
	>🌀</text>

テキストの中心座標を求めるのではなく、テキストを上下左右中央に揃えても、結局固定値のハードコーディングが残存してしまい、フォントサイズが変わると描画が欠落する可能性が考えられます。

むずかしいなあ…