インラインSVGで画像を回転させたいが、中心軸を設定できない

インラインSVGの中のimage要素を回転させたいのですが、image要素に対してrotateを設定しても、回転軸がsvg要素の左上となってしまいます。

HTML
1<!DOCTYPE html>
2<html lang="jp">
3<head>
4<style>
5svg image{
6	transform-origin: center;
7	transform: rotate(90deg);
8}
9</style>
10</head>
11<body>
12<svg width="500" height="500" viewBox="0 0 500 500" style="background: pink">
13	<image x="100" y="0" xlink:href="https://placehold.jp/100x500.png" />
14	<image x="200" y="0" xlink:href="https://placehold.jp/100x500.png" />
15	<image x="300" y="0" xlink:href="https://placehold.jp/100x500.png" />
16</svg>
17</body>
18</html>

90度傾けた場合はこうなります。

しかし、画像の中心から回転させたいので、実際に実現したい処理は、同じ高さで横一本の棒になるイメージです。

画像の中心点から回転させたい場合は、どうすべきでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

css
1    transform-origin: center;

を指定しましょう。

通常、transform-origin はボックスの中央なのですが、SVG の場合は SVG全体の左上になるようです。

更新された要求への回答

CSSのtransformプロパティを使うとどうしてもSVG全体が変形対象になってしまうようなので、<image>にSVGのtransform属性を付けるのはいかがでしょうか。

svg
1    <image x="100" y="0" xlink:href="https://placehold.jp/100x500.png" transform="rotate(90, 150, 250)"/>
2    <image x="200" y="0" xlink:href="https://placehold.jp/100x500.png" transform="rotate(90, 250, 250)" />
3    <image x="300" y="0" xlink:href="https://placehold.jp/100x500.png" transform="rotate(90, 350, 250)" />

投稿2021/05/19 15:27

編集2021/05/19 23:42

int32_t

総合スコア21008

sanset

2021/05/19 15:58

ありがとうございます。 transform-origin: center;を付けると確かにsvgの中央に対して回転しました。ただ、imageの位置が中央でない場合は、やはりimageの中心に対して回転しません。 3つ横並びで90度傾けた時、横1本の棒になるイメージで操作を行いたいのです。質問内容を具体的に修正しましたので、もしお分かりになれば是非ご回答お願いします。（少し変わってしまい申し訳ありません）

sanset

2021/05/20 12:47

ありがとうございます。第二第三引数で画像の中心点を設定することで理想の処理となりました。なかなか難儀な仕様ですね…。

行動規範の内容に同意します