実現したいこと

レスポンシブ対応させた上で、テキストをSVGのパスに沿って動かしたい。
（波線のかたちでテキストが無限ループすればそれでいいので、SVG含めやり方には特にこだわらない）

発生している問題・分からないこと

動かすところまでは実装できたので、スマートフォン表示用にレスポンシブ対応させたい。

svgからwidthとheightを削除、コンテナで囲って親要素にwidth:100%を設定してみましたがうまくいきませんでした。

yambejp

2024/11/15 06:50

＞レスポンシブ対応させた上で、テキストをSVGのパスに沿って動かしたいちょっと意味が伝わってきません。希望する配置と動作を図示できませんか？

ninja

2024/11/15 07:00

参照サイトからですがゴールの形はこれです https://gyazo.com/df75a83880496d63f595431827ebc3e8 サイズ固定になっているので、動きなどはこのままにレスポンシブで拡大縮小するようにしたいです。

juner

2024/11/15 07:21 編集

とりあえず上記の話からすると playground はこんな感じですね。（あとで確認します。 https://livecodes.io/?x=id/zgbjavijevj

juner

2024/11/15 07:34

svg の属性の preserveAspectRatio の話みたいですね。 https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/preserveAspectRatio https://qiita.com/_ki/items/a284171369cd60f56c1e

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

回答2件

参考ページのコードでは、pathが横幅640px固定になってます。これを、たとえば任意の画面横幅に合ったpathにするには、JavaScriptでpathの数値をうまいこと書き換える必要があります。私見では、気軽にコードを書いてあげられないぐらいには面倒な処理になると思います。

または、.text-wrapper 要素を transform: scale() で 100vw ÷ 640 倍して、フォントサイズはそのぶん小さめするといいかもしれません。

任意の画面横幅ではなく、例えば2種類ぐらいの横幅だけサポートすればいいのであれば、メディアクエリで path のデータを切り替えればよいでしょう。

投稿2024/11/15 07:19

編集2024/11/15 09:10

int32_t

総合スコア21599

＞レスポンシブ対応

の意図がよくわかりませんが、viewboxを指定すればサイズは可変になりますがそういうことでしょうか？

参考

html
1<style>
2#svg1{width:300px;}
3#svg2{width:500px;}
4
5</style>
6<svg viewbox="0 0 600 200" xmlns="http://www.w3.org/2000/svg" id="svg1">
7  <path id="wavePath1" 
8        d="M 10 150 
9           Q 100 50, 200 150 
10           T 400 150 
11           T 600 150" 
12        fill="transparent" stroke="lightgray" />
13  <text font-size="20" fill="blue">
14    <textPath id="waveText1" href="#wavePath1" startOffset="0%">
15      波のように動くテキストがパスに沿って流れています
16    </textPath>
17  </text>
18  <animate
19    xlink:href="#waveText1"
20    attributeName="startOffset"
21    from="0%"
22    to="100%"
23    dur="8s"
24    repeatCount="indefinite"
25  />
26</svg>
27<svg viewbox="0 0 600 200" xmlns="http://www.w3.org/2000/svg" id="svg2">
28  <path id="wavePath2" 
29        d="M 10 150 
30           Q 100 50, 200 150 
31           T 400 150 
32           T 600 150" 
33        fill="transparent" stroke="lightgray" />
34  <text font-size="20" fill="blue">
35    <textPath id="waveText2" href="#wavePath2" startOffset="0%">
36      波のように動くテキストがパスに沿って流れています
37    </textPath>
38  </text>
39  <animate
40    xlink:href="#waveText2"
41    attributeName="startOffset"
42    from="0%"
43    to="100%"
44    dur="8s"
45    repeatCount="indefinite"
46  />
47</svg>