svgのテキストを中央に表示したい。（text-align: center）、(margin:0 auto)と同じように

内容を修正致しました。わかりづらく申し訳ございません。
いつもお世話になっております。どうかご教授下さい。

現在SVGでテキストを表示させているのですが、ウィンドウを可変してもx,yの座標を決めている為、当然ながら中央揃えになりません。

html
1<div class="gradient_bg mask">
2</div>
3<svg>
4  <clipPath id="svgPath">
5     <text x="300" y="300" textLength="700" font-family="sans-serif" font-size="150px"font-style="italic"font-weight="bold">HOGE</text>
6  </clipPath>
7</svg>
8</body>
9

css
1  .gradient_bg{
2    width: 1020px;
3    height: 400px;
4    margin: 0 auto;
5    background: linear-gradient(270deg, #3fb1d3, #ffffff);
6    background-size: 600% 600%;
7
8    -webkit-animation: AnimationName 15s ease infinite;
9    -moz-animation: AnimationName 15s ease infinite;
10    animation: AnimationName 15s ease infinite;
11
12    @-webkit-keyframes AnimationName {
13        0%{background-position:0% 50%}
14        50%{background-position:100% 50%}
15        100%{background-position:0% 50%}
16    }
17    @-moz-keyframes AnimationName {
18        0%{background-position:0% 50%}
19        50%{background-position:100% 50%}
20        100%{background-position:0% 50%}
21    }
22    @keyframes AnimationName {
23        0%{background-position:0% 50%}
24        50%{background-position:100% 50%}
25        100%{background-position:0% 50%}
26    }
27  }
28
29  .mask {
30  -webkit-clip-path: url(#svgPath);
31  clip-path: url(#svgPath);
32  }

やりたいことはグラデーションをマスクしたSVGテキストを1020pxの間でセンタ揃えにしたいという事になります。
説明不足で大変申し訳ございません。
どうぞご教授お願いいたします。

MasakazuFukami

2016/06/16 06:41

もし可能であれば一枚のhtmlとしてこちら側で検証しやすいようにしていただける幸いです。上記コードをコピペしてもhtmlやcssの状態によって見え方が異なりますので。。。

LanHma

2016/06/16 07:37

修正を行いました。お手数をおかけしました。

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

回答1件

ベストアンサー

質問の内容の場合は、と言うのを先に銘打っておいての回答になります。
フォントの種類や、その他諸々の条件で変更しないといけない場合もありますので、こんな感じにできるよというサンプルとしてご覧ください。

サンプル | jsFiddle

サンプルにも書きましたが、表示したいsvgとそのグラデーションを囲むように親要素を入れておきます。
サンプルでは、width, height共に100%(heightは100vh(表示領域の高さ))にしてあります。

質問のフォントが大きすぎたので、フォントサイズは小さくしてあります。

さて、問題点のsvgにおけるtextの開始位置、x,yですが、これはhtml上で数値を入れると固定されてしまいます。なので、ここを手動で入れないといけませんが、基本的には、

textの属性で text-anchor="middle"を入れておく
親要素の半分が横のセンター
親要素の半分 + フォントの半分が縦のセンター

とご理解頂けると思います。この時、フォントのサイズはfont-size="70px"等で指定してあって、70pxの枠の中にびっちり隙間が無いようにフォントが入っているわけではなく、隙間が必ずあります。
そのために、上記内容で行けば、70px/2で、35px入れればいいじゃないかと考えがちですが、それだと少し下にずれてしまうのです。

そのために、サンプルでは、70pxから単位をとった70に0.4をかけてだいたい真ん中を指定しています。これらはフォントの種類によって変わる部分かと思うのでいろいろ試してみて下さい。

text-anchor="middle"が入っているので、出力されたテキストは真ん中に揃います。ということで、後は親要素のセンターがわかればレスポンシブにできるという具合です。

今回は、jQueryでやってみました。
あと、scssでやっておられたのかも知れませんがcss用にと実験で若干keyframesまわりとアニメーションを書き換えてます。

サンプルのresult画面(右下)の各境界線は動かすことができるので、レスポンシブにできているかを確認できます。
更に、resizeの処理ですが、このままだと、リサイズ中も動作してしまいますので、setTimeoutなどを利用して、リサイズ完了後に処理をするというような内容を組み込まれるとより良いかと思います。

これが正解かどうかは、実際にどういう利用用途を考えておられるかで変わると思うんですが、こんな感じにできると言うのがわかれば後は応用とアイデアで何とか...イケるんじゃなかろうかと。

投稿2016/06/19 07:09